Home/ Questions/Q 9173081
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T16:30:21+00:00

I’ve read many tutorials and can’t seem to get it right. Ok I know

  • 0

I’ve read many tutorials and can’t seem to get it right. Ok I know that the jquery click function works when you are doing something to the exact same element but how do you make it effect another and toggle back?

I have a menu and when I click on an item I want the background (body) to change to an image.

Example:
HTML

<body>
<ul class="menu"> 
  <li class="menu-item"><a>item 1</a></li>
  <li class="menu-item"><a>item 2</a></li>
  <li class="menu-item"><a>item 3</a></li>

</ul>
</body>

JQUERY

$(".menu-item a").click(function () {
  $(body).css('background', 'http://example.com/image.png'); <-- first menu item
  $(body).css('background', 'http://example.com/image.png'); <-- second menu item
  $(body).css('background', 'http://example.com/image.png'); <-- third menu item
   });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use .index() – DEMO

    $("a").on("click", function(e) {
  e.preventDefault();

  var i = $("li").index( $(this).parent() );

  if ( i === 1 ) {
    $('body').css('background', 'beige');
  } else if ( i === 2 ) {
    $('body').css('background', 'honeydew');
  } else {
    $('body').css('background', 'pink');
  }

});
    • 0