使用jQuery设置活动菜单项

Question

我想做的是：一个常规菜单，其中当前活动页面的样式不同。

HTML（正常工作）

<div>
    <ul class="nav">    
        <li>
            <a class="active" href="#">
                <span>one</span>
            </a>
        </li>

        <li>
            <a href="#">
                <span>two</span>
            </a>
        </li>

        <li>
            <a href="#">
                <span>three</span>
            </a>
       </li>
    </ul>       
</div>

CSS（正常工作）

.nav .active {
    color: #fff;
    background-color: #000;
}

JS（无效）

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

Codepen取自Sara Soueidan的Codepen 。

Sara Soueidan的版本甚至无法在Codepen中复制（同时针对a和li）。 我发现的另一个版本正在使用以下JS：

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

该版本似乎正在运行，但是由于某些我不明白的原因，我需要三次单击菜单按钮才能同时使用URL和设置活动类。

谁能给这个平庸的事情一些启发？

Answer 1

问题：这行是$(this).addClass('active').siblings().removeClass('active');

其实有没有siblings在a一个内li

解决方法：您需要先卸下active从类a标记，然后添加到$(this)

$('a.active').removeClass('active');
$(this).addClass('active');

Answer 2

经过比我想承认的多小时的时间，我发现按下菜单按钮时甚至不需要设置'li'的活动类，但是我必须检查当前URL是否包含该部分。菜单。

因此，我在JS中链接了一个快速n脏if-elseif：

$(document).ready(function () {
    if(window.location.href.indexOf("one") > -1) {
        $('.nav-container ul li').eq(1).addClass("active");
    } else if(window.location.href.indexOf("two") > -1) {
        $('.nav-container ul li').eq(2).addClass("active");
    } else $('.nav-container ul li').eq(0).addClass("active");
});

为了测试URL是否包含字符串“ one”，我使用了：

window.location.href.indexOf("one") > -1

然后我用eq（i）定位特定的“ li”，其中i从0到n-1个菜单项。

这不是最佳解决方案，但它适用于菜单项少于5个的菜单，并且如果“一个”菜单项包含诸如“一对一”，“一对二”之类的子项，则也可以很好地工作。