0

我在弄清楚如何从我的一个列表中删除一个 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' & 'li.left-main-list' 没有任何成功。

非常适合回答这个问题，我希望我的问题（这次）比我以前的问题更准确。:)

/账单

ps：一个子主题和一个主主题是否可以同时处于活动状态，并且该子主题的活动类别，如果您例如单击另一个子主题，则将其删除，但主要项目仍然具有其活动类别？

4

5 回答 5

3

当我在主页上浏览菜单时，我想在单击时将活动列表项类更改为活动

您可以只针对li相关的 s 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()用于允许活动菜单和子菜单，但在主菜单更改时不允许

当在位于不同主菜单元素内的子菜单之间切换时，我研究了使其更加动态的可能性，以便在链上添加项目的激活。

修复嵌套 s 的 HTML，ul从而使您的嵌套uls 在lis 内部而不是仅在上部内部，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 - 链式激活

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

希望这可以帮助。

于 2013-03-28T21:19:30.530 回答
1

试试这个：

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

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

于 2013-03-28T21:19:08.840 回答
0 
$('.left-main-list').click(function() {   
   $('.left-main-list').removeClass('active');
   $(this).addClass('active'); 
});
于 2013-03-28T21:18:11.207 回答
0

我认为您正在寻找的是：

$(document).ready(function() {
   $('li').click(function() {
    $('li.left-main-list').removeClass('active'); 
    $(this).addClass('active'); 
  });
});
于 2013-03-28T21:23:53.753 回答
0

怎么样

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

于 2013-03-28T21:26:47.027 回答