Question

我希望能够确定用户当前所在的页面。一个简单的指示器，其形式是为用户当前正在查看其上下文的导航链接添加唯一样式

这是我的脚本，所有选择器工作正常，if语句也可以完成这项工作，但addClass（）函数什么都不做..这是我的代码：

<script>
$(document).ready(function(){
    var pathname = window.location.pathname;
    $("#links ul li a").each( function() {
        var href= $(this).attr("href");
        if (pathname.indexOf(href) >= 0){
            $(this).addClass("active");
        }
    } );
});
</script>


    <nav id="links">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a>About</a></li>
        <li><a>Contact</a></li>
    </ul>
</nav>

HTML：

让它工作，这是我的最终代码，是否需要任何改进？

$(document).ready(function(){
    var pathname = window.location.pathname;
    var onDomain=true;
    $("#links ul li a").each( function() {
        var href= $(this).attr("href");
        if (href != undefined && pathname.indexOf(href) >= 0){
            $(this).addClass("active");
            onDomain=false;
        }
    });
    if (onDomain){
        $("#links ul li:first-child a").addClass("active");
    }
});

Answer 1

可能应该将活动类应用于li ..假设你的逻辑是正确的并且应该将类应用于li（很难在没有html和css的情况下告诉）：

if (pathname.indexOf(href) >= 0){
        $(this).parent().addClass("active");
}

Answer 2

将href分配给a;

<nav id="links">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

然后尝试：

   var pathname = window.location.pathname;
   $("#links ul li a").each( function() {
        var href= $(this).attr("href");
        if (href.length && pathname.indexOf(href) >= 0){
            $(this).addClass("active");
        }
    });

如果您无法更改HTML，请尝试以下操作：

   var pathname = window.location.pathname;
   $("#links ul li a").each( function() {
        var href= $(this).attr("href");
        if (href != undefined && pathname.indexOf(href) >= 0){
            $(this).addClass("active");
        }
    });

Answer 3

var loc = ''+( $(location).attr('href').split('/').slice(-1) );
if( typeof loc !== 'undefined'){
    $("#links li").find("a[href='"+loc+"']").each(function(){
        $(this).addClass("active");
    });
}else( typeof loc === 'undefined' ){
    $("#links li a:eq(0)").addClass("active"); // if you use 'home' as your first.
}

Answer 4

我不确定我是否得到了这个问题，但我会选择以下内容：

$("#links ul li a").filter( function() {
    return window.location.pathname.indexOf(this.href) != -1;
}).addClass('active');

Answer 5

<script type="text/javascript">

$(window).load(function() {
                  var url = window.location;
                    $('#nav a').filter(function() {
                        return this.href == url;
                    }).parents("li").addClass('active');

            });
</script>

这是工作使用外部文件进行菜单时使用此脚本

喜欢 index.php ，包含 menu.php 你必须使用这个scritp tu检测url加载和类菜单更改为活动类。

感谢你的代码是你的代码工作

简单的jQuery addClass（）似乎不起作用

5 个答案: