Question

我已经在线阅读了所有这些内容，但其他一切都过于复杂，我只是想实现一个简单的代码，我可以阅读而无需进入子串和所有这些东西，所以我认为这可能是一个很好的挑战作为jquery中的菜鸟。我已经提出了这个代码，但没有成功。

HTML

<ul id="nav">
    <li><a href="/" id="home" class="lettering">HOME</a></li>
    <li><a href="/about" id="about" class="lettering">ABOUT</a></li>
    <li><a href="/works" id="works" class="lettering">WORKS</a></li>
    <li><a href="/contact" id="contact" class="lettering">CONTACT</a></li>
</ul>

的jQuery

$(document).ready ( function(){
    var path = window.location.pathname;
    $('#nav li a').each(function() {
        if( path = ("/"+this.id+"/") ){
            this.addClass('active');
        } else {
            ('#home').addClass('active');
        }
    })
})

我希望你们不要激怒我，我的意图纯粹是学术性的，而不是取得成果。这里有什么问题？我没有得到任何错误日志或任何顺便说一句。

编辑：删除了斜杠（感谢贾斯汀），也尝试过Phrogz建议但没有运气。如果有人接受了挑战，该网站位于@ egegorgulu.com

Answer 1

在你的js中，你有一个尾随斜杠附加到路径，但在你的标签的href中没有尾部斜杠。因此，除非您的服务器添加一个尾部斜杠，否则这些路径永远不会匹配。

Answer 2

我可以发现你的Javascript中有一些错误。

主要是因为你需要知道在.each()内，this引用了DOM元素对象，所以要在其上调用任何jQuery方法，你需要将this传递给jQuery功能：$(this)。

请尝试以下方法：

$(document).ready ( function(){
    var path = window.location.pathname;
    $('#nav li a').each(function() {
        if( path === "/"+this.id ){ // EDIT: This was the problem with the if
            $(this).addClass('active'); // "this" is a DOM element, not a jQuery object
        } else {
            $('#home').addClass('active'); // you missed the $
        }
    }); // always get in the habit of being explicit with your semicolons
});

编辑：您的if的问题在于您使用了赋值运算符=而不是比较运算符==（与类型转换相等）/ ===（相等）相同的类型）。我已经编辑了上面的代码来解决这个问题。

编辑2：好的，让我们尝试一种利用jQuery filter()函数的新方法，利用href元素上的<a>属性来查找匹配项：

$(document).ready ( function(){
    var path = window.location.pathname;
    var $navLinks = $('#nav li a');
    $navLinks.removeClass('active'); // start with a blank slate
    $navLinks.filter(function() {
        return path.indexOf(this.href) === 0; // test if the pathname starts with the current link's href attribute
    }).addClass('active'); // find a matching link to add the class to where the href attribute starts with the pathname
    if ($navLinks.filter('.active').length === 0) { // if nothing matches
        $('#home').addClass('active'); // make the home link active as a default
    }
});

作为学者，请注意，如果您愿意，可以使用jQuery强大的链接语法和一些JS知识来进一步压缩它，以便它可以变得如此小：

$(document).ready ( function(){
    if (!$('#nav li a').removeClass('active').filter(function() {
            return window.location.pathname.indexOf(this.href) === 0;
        }).addClass('active').end().filter('.active').length) {
        $('#home').addClass('active'); // make the home link active as a default
    }
});

如何使用简短但难以理解的代码（也未经测试，顺便说一句）？

Answer 3

如果有人在徘徊，我想出了以下功能。非常感谢GregL的指导，这对我帮助很大。

jQuery.noConflict()( function(){
    var $ = jQuery;
    var path = window.location.pathname;
    $('#nav li a').each(function() {
        if( path === "/" + this.id + "/" ){ 
            $(this).addClass('active'); 
        } else if( path === "/" ) {
            $('#home').addClass('active'); 
        }
    }); 
});

noConflict的原因是因为我在联系页面上使用了嵌入式联系表单。而且我很确定第二个if是不必要的，但是一旦我正常工作就不想删除它。

使用jQuery突出显示导航菜单中的当前页面项

3 个答案: