Question

我有一些问题想出如何从我的一个列表中删除一个class =“active”。

我有一个导航栏：

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

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

当我在主页上浏览我的菜单时，我想在点击时将活动列表项更改为活动状态，所以我现在有了这个jQuery代码：

$(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'); 
    });

});

我试过'.left-main-list li'＆amp; 'li.left-main-list'没有任何成功。

很高兴回答这个问题，我希望我的问题（这次）比我以前的问题更准确。 :)

/比尔

ps：子主题和主要主题可以同时处于活动状态，并且该子主题的活动类可以被移除，例如，如果您单击另一个子主题，但主项仍然具有它的活动类吗？

Answer 1

当我在主页上浏览我的菜单时，我想要更改活动列表项目类在单击时处于活动状态

您可以定位相关li内的div，类似于：

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

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

DEMO - 仅li内的目标.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的HTML，使嵌套的ul位于li内，而不是仅位于上方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 - 链式激活

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

希望这有帮助。

Answer 2

试试这个：

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

这只会影响您点击的元素的兄弟姐妹。

Answer 3

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

Answer 4

我认为您正在寻找的是：

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

Answer 5

怎么样

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

我如何使用jQuery对我的一个<li>元素进行.removeClass（'active'）？</li>

5 个答案: