Question

突出显示当前菜单项不起作用，为什么？我想我做的一切都还好，但它没有用。

你能给我一些帮助吗？

HTML

<section id="menu-container">
    <div id="bar"><img src="border.png" /></div>
    <nav id="menu">
        <ul>
            <li id><a href="#">Home</a></li>
            <li><a href="page.html1">Home2</a></li>
            <li><a href="page.html2">Home3</a></li>
            <li><a href="page.html3">Home4</a></li>
            <li><a href="page.html4">Home5</a></li>
        </ul>
    </nav>
</section>

使用Javascript：

$(function(){

    var url = window.location.href; 

    $("#menu ul  li a").each(function() {

        if(url == (this.href)) { 
            $(this).closest("li").addClass("active");
        }
    });
});

CSS：

.active{
    background-color:#0C3;
}

Answer 1

使用$(this).attr("href")从链接中获取href值，因为您已经在使用JQuery。

将此与andrew的建议相结合，以获得当前网址的结尾，您现在可以在if语句中测试更好的值。

$(function(){
    var url = window.location.href.split('/'); 
    url = url[url.length-1];

    $("#menu a").each(function() {
        var $this = $(this); // to minimize DOM traversal
        if (url === $this.attr("href")) {
            $this.closest("li").addClass("active");
        }
    });
});

<小时/> 的更新：

更好的选择是使用高级JQuery选择器：

$(function(){ var url = window.location.href.split('/'); url = url[url.length-1]; $("#menu a[href='" + url + "'").addClass("active"); });

Answer 2

this.location.href // http://stackoverflow.com/questions/22120946/highlight-current-menu-item-is-not-working-why

尝试：

 var url = window.location.href.split('/');
 url = url[url.length-1];

Answer 3

var url = window.location.href;
$('#menu a').each(function(k,s) {
    if(this == url){
        $(this).addClass('active');
    }
});

这是解决方案的fiddle。小提琴中的第二个链接应该是活动链接。

突出显示当前菜单项不起作用，为什么？

3 个答案: