7

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

这是我的脚本，所有选择器都可以正常工作，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");
    }
});
4

5 回答 5

3

可能应该将活动类应用于 li.. 假设您的逻辑是正确的并且该类应该应用于 li （如果没有 html 和 css 很难说）：

if (pathname.indexOf(href) >= 0){
        $(this).parent().addClass("active");
}
于 2012-05-06T19:39:56.340 回答
3

分配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");
        }
    });
于 2012-05-06T19:47:26.870 回答
2 
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.
}
于 2012-05-06T19:37:16.100 回答
0

我不确定我是否得到了这个问题，但我会选择类似的东西：

$("#links ul li a").filter( function() {
    return window.location.pathname.indexOf(this.href) != -1;
}).addClass('active');
于 2012-05-06T20:10:00.820 回答
0 
<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 你必须使用这个脚本来检测加载的 url 并将类菜单更改为活动类。

谢谢你的codeparadox你的代码是有效的

于 2015-05-24T18:53:00.397 回答