I am having some issues figure out how i can just remove a class ="active" from a just one of my lists.

I have a navigation bar:

<div class="container">
  <ul class="nav">
    <li class="active"><a href="#"></a>Home</li>
    <li><a href="#"></a>About</li>
    <li><a href="#"></a>Contact</li>
  </ul>
</div>

I also have a menu within Home:

<div class="container_2">
  <ul>
    <li class="left-main-list active"><a href="#">Subject 1</a></li>
      <ul class="list-in-list">
        <li><a href="#">Sub subject 1</a></li>
        <li><a href="#">Sub subject 2</a></li>
      </ul>
    <li class="left-main-list><a href="#">Subject 2</a></li>
    <li class="left-main-list><a href="#">Subject 3</a></li>
  </ul>
</div>

While i browse my menu on the home page, i want to change the the active list items class to active when clicked, so i now have this jQuery code:

$(document).ready(function() {

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

 });

This works for my menu, the class change to the current one, but it also delete my navigation bars class, which i don't want. :)

I have tried something like:

$(document).ready(function() {

    $('.left-main-list').click(function() {
       $('.left-main-list li').removeClass('active'); 
       $(this).addClass('active'); 
    });

});

I've tried '.left-main-list li' & 'li.left-main-list' without any success.

Greatful for answer to this question, and i hope my question (this time) is more accurate than my previous ones. :)

/Bill

ps: Can a sub subject AND a main subject be active at the same time, and that sub subject's class of active, be removed if you for example click another sub subject, but the main item still have it's class of active?

I am having some issues figure out how i can just remove a class ="active" from a just one of my lists.

I have a navigation bar:

<div class="container">
  <ul class="nav">
    <li class="active"><a href="#"></a>Home</li>
    <li><a href="#"></a>About</li>
    <li><a href="#"></a>Contact</li>
  </ul>
</div>

I also have a menu within Home:

<div class="container_2">
  <ul>
    <li class="left-main-list active"><a href="#">Subject 1</a></li>
      <ul class="list-in-list">
        <li><a href="#">Sub subject 1</a></li>
        <li><a href="#">Sub subject 2</a></li>
      </ul>
    <li class="left-main-list><a href="#">Subject 2</a></li>
    <li class="left-main-list><a href="#">Subject 3</a></li>
  </ul>
</div>

While i browse my menu on the home page, i want to change the the active list items class to active when clicked, so i now have this jQuery code:

$(document).ready(function() {

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

 });

This works for my menu, the class change to the current one, but it also delete my navigation bars class, which i don't want. :)

I have tried something like:

$(document).ready(function() {

    $('.left-main-list').click(function() {
       $('.left-main-list li').removeClass('active'); 
       $(this).addClass('active'); 
    });

});

I've tried '.left-main-list li' & 'li.left-main-list' without any success.

Greatful for answer to this question, and i hope my question (this time) is more accurate than my previous ones. :)

/Bill

ps: Can a sub subject AND a main subject be active at the same time, and that sub subject's class of active, be removed if you for example click another sub subject, but the main item still have it's class of active?

• javascript
• jquery
• html

Share Improve this question Follow asked Mar 28, 2013 at 21:13 XT_NovaXT_Nova 1,17055 gold badges1717 silver badges3434 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

While i browse my menu on the home page, i want to change the the active list items class to active when clicked

You could just target the lis within the relevant div, similar to this:

$(document).ready(function() {
    var $listItems = $('div.container_2 li');

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

---

DEMO - target lis within .container_2 only

---

Can a sub subject AND a main subject be active at the same time, and that sub subject's class of active, be removed if you for example click another sub subject, but the main item still have it's class of active?

Still targeting the container you could use jQuery's parent(), similar to this:

$(document).ready(function () {
    $('div.container_2 li').click(function () {
        var $this = $(this);
        var $children = $this.parent().find('li');

        $children.removeClass('active');
        $this.addClass('active');
    });
});

---

DEMO - Using parent() to allow active menu and sub-menu but not when main menu changes

---

I looked at the possibility of making this more dynamic to add activation of items going up the chain when switching between sub menus located within different main menu elements.

Fixing the HTML of the nested uls whereby your nested uls are inside lis instead of just inside the upper ul you can do a fully dynamic implementation.

Assume your HTML like this:

<div class="container">
    <ul class="nav">
        <li class="active"><a href="#"></a>Home</li>
        <li><a href="#"></a>About</li>
        <li><a href="#"></a>Contact</li>
    </ul>
</div>
<div class="container_2">
    <ul>
        <li class="left-main-list active"><a href="#">Subject 1</a>

        </li>
        <li>
            <ul class="list-in-list">
                <li><a href="#">Sub subject 1</a>

                </li>
                <li><a href="#">Sub subject 2</a>

                </li>
                <li>
                    <ul class="list-in-list">
                        <li><a href="#">Sub subject 1</a>

                        </li>
                        <li><a href="#">Sub subject 2</a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="left-main-list"><a href="#">Subject 2</a>

        </li>
        <li class="left-main-list"><a href="#">Subject 3</a>

        </li>
    </ul>
</div>

Now, using the following script, you can also make parents of any sub menu items active when changing from a sub menu to another which is within another main menu item, similar to this:

$(document).ready(function () {
    $('div.container_2 li>a').click(function () {
        var $this = $(this);
        var $relatedElements = $this.parents('ul').find('li');

        if($this.hasClass('active')){
            return;
        }

        $relatedElements.removeClass('active');
        $this.parent('li').addClass('active');

        var $parents = $this.parents('li');

        $parents.each(function(){
            $(this).not($this.parent()).prev().addClass('active');
        });
    });
});

---

DEMO - Chain-like activation

---

I think this should have all possible examples to get you started from here.

Hope this helps.

Try this:

$("li").click(function() {
    $(this.parentNode).children("li").removeClass("active");
    $(this).addClass("active");
});

This will affect only the siblings of the element you click on.

$('.left-main-list').click(function() {   
   $('.left-main-list').removeClass('active');
   $(this).addClass('active'); 
});

I think what you're looking for is this:

$(document).ready(function() {
   $('li').click(function() {
    $('li.left-main-list').removeClass('active'); 
    $(this).addClass('active'); 
  });
});

How about

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