2

我已经在网上阅读了所有相关内容，但其他所有内容都过于复杂，我只想实现一个简单的代码，无需进入子字符串和所有这些东西就可以阅读，所以我认为这对于菜鸟来说可能是一个很好的挑战在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

4

3 回答 3

3

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

于 2012-01-19T00:15:17.157 回答
2

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

主要是因为你需要知道 inside 是.each()指thisDOM 元素对象，所以要调用它上面的任何 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：好的，让我们尝试一种利用 jQueryfilter()函数的新方法，利用元素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
    }
});

对于一段简短但难以理解的代码（顺便说一句，这也是未经测试的），那是怎么回事？

于 2012-01-19T00:52:07.597 回答
0

如果有人在徘徊，我想出了以下功能。非常感谢 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 是不必要的，但一旦我让它正常工作就不想删除它。

于 2012-01-24T12:49:37.293 回答