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

经过几个小时，我想承认，我发现我甚至不需要设置“活跃”的活跃课程。当按下菜单按钮时，我必须检查当前URL是否包含该菜单的那一部分。

因此，我在JS中链接了一个快速n-dirty 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是否包含字符串＆＃34; one＆＃34;，我使用了：

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

然后我针对特定的＆＃39; li＆＃39;使用eq（i），其中i是0到n-1个菜单项。

不是最好的解决方案，但它适用于包含5个以下项目的菜单，如果＆＃34; one＆＃34;菜单项有一些像＃34; one-one＆＃34;，＆＃34; one-two＆＃34;等

使用jQuery设置活动菜单项

2 个答案: