How do i add and remove an active class with jQuery?

Question

I have an unordered list.

<style>
  #button1 { position:relative; z-index: 3; }
  #button2 { position:relative; z-index: 2; }
  #button3 { position:relative; z-index: 1; }
</style>

<ul>
  <li id="button1">Button 1</li>
  <li id="button2">Button 2</li>
  <li id="button3">Button 3</li>
</ul>

I am currently using css to give each id a different z-index so that one button is slightly on top of the next. What I want to do is to use jQuery to add a class that add's a much higher z-index to whatever button was clicked such as '999' to ensure that it will be on top of the other two buttons. I can't figure out how to add an active class to the currently clicked <li> while removing the active class from whatever button currently has it set. I don't know how to make jQuery figure out which of the other two <li>'s has the active class set before the new button is pushed. How would I go about doing that?

Also I am not sure if adding a class will solve the problem since I am already setting the z-index by targeting the <li>'s id. Maybe I would need to affect the inline css for the currently pushed button so it overrides the id's css, and also have it check to see which of the other two has the inline css z-index set to '999' so it can remove their inline css and have a larger z-index than the other two buttons and appear on top?

Answer 1

To take Kobi's answer a little bit further. I would give the li(s) some common class if possible or an id on the ul.

var $li = $('li.clickMe'); // or var $li = $('#id li');

$li.click(function(){
    $li.removeClass('active');
    $(this).addClass('active');
});

If you are setting the z-index based on IDs, then the css rule for the ID will likely take precedence over any class based rule. You could as well put the z-index property inline and change it with jQuery.

var $li = $('li.clickMe'); // or var $li = $('#id li');

$li.click(function(){
    $li.css('z-index', 1); // Sets all li(s) to z-index of 1.
    $(this).css('z-index', 999);
});

Answer 2

the best practice is to use class, but you can also modify the style property, like

$('li').click(function(){

  var li = $(this);

  // check the highest z-index
  var maxIndex = 4;

  $('li').each(function(){
    var zindex = $(this).css("z-index");
    if ( parseInt(zindex) > maxIndex)
    {
      maxIndex = parseInt(zindex);
    }
  });

  // increment by 1
  maxIndex++;

  li.css('z-index', maxIndex);
});

Answer 3

if I understand correctly, should be

$('li').click(function(){
    $('.active').removeClass('active');
    $(this).addClass('active')
});

Edit - what you're experiencing is a CSS problem - #id rules take precedence to .class rules.

To answer your question, you can set z-index using:

$(this).css('z-index', 999);

Answer 4

By looking at all you answers and upon finding the siblings selector, I figured out an answer that is simple and works for me. Please tell me if there is anything wrong with it other than I didn't use classes. I think for my situation, it works nicely! Thanks for all your guys' help!

$('li').click(function(){
      $(this).css({'z-index' : '999'})
      .siblings().css({'z-index' : ''});
});

Since smack0007's answer helped me the most to get the answer I am using, I am giving him/her the checkmark.

Answer 5

Here is another method... this stores the z-index and replaces it when not the active button.

$(document).ready(function(){
 var indx = $('li[id*="button"]').length;
 $('#button1').addClass('active');
 $('li[id*="button"]').each(function(){
  $(this).css('z-index',indx).data('zindx', indx);
  $(this).click(function(){
   var active = $('.active');
   active.css('z-index', active.data('zindx')).removeClass('active');
   $(this).addClass('active').css('z-index',999);
  })
  indx--;
 })
})