i .removeClass('active')如何为我的一个<元素与jQuery

<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>
      <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>

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

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

当我在首页浏览我的菜单时，我想更改标题活动列表项类在单击

时变为活动

您可以只针对相关div中的li s，类似于:

$(document).ready(function() {
    var $listItems = $('div.container_2 li');
    $listItems.click(function() {
        $listItems.removeClass('active'); 
        $(this).addClass('active'); 
    });
 });

---

DEMO -目标li s仅在.container_2内

---

子主语和主主语可以同时激活吗那个子主题的活动类，被移除，如果你单击另一个子主题，但主项目仍然有它的类活跃的?

仍然针对容器，您可以使用jQuery的parent()，类似于:

$(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 -使用parent()允许活动菜单和子菜单，但当主菜单更改时不允许

---

我考虑了在不同主菜单元素的子菜单之间切换时，在链条上添加激活项的可能性。

修复嵌套ul s的HTML，即您的嵌套ul s在li s内，而不是仅仅在上部ul内，您可以做一个完全动态的实现。

假设你的HTML像这样:

<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>

现在，使用下面的脚本，你还可以使任何子菜单项的父菜单项在从一个子菜单更改为另一个主菜单项中的另一个子菜单项时处于活动状态，类似于:

$(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 -链式激活

---

我认为这应该有所有可能的例子，让你从这里开始。

试试这个:

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

这将只影响您所单击的元素的兄弟元素。

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

我想你要找的是这个:

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

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