Question

如果文件名与href匹配，我试图自动将一个类附加到LI（例如;如果锚的href属性设置为about.php，当前页面的文件名是about.php那么它会附上课程。）然而，顺便说一句，我遇到了一些并发症，我一直对语法有些困惑......

到目前为止，我有这个......

var filename = location.pathname.substring(1)

$(document).ready(function(){
    $('a').each(function() {
        if (this.href === filename) {
            $(this).parent('li').addClass('current_page_item');
        }
    });
});

我的导航构建如图所示here，正如您所看到的，它可以正常工作，但只有在手动设置类时...所以我试图从实际的文件名中自动设置它

我希望这对某些人有所帮助，因为我现在对如何让这个工作感到困惑！

感谢，你的人谁贡献，这是有很大的帮助，并会帮助我了解了jQuery语法进一步，实际上是选择一个具体的东西，jQuery的编写逻辑语句真的让我困惑，因为它是对PHP非常不同的，这是我我曾经。

我的标记看起来像这样，因为我之前没有包含它，只是假设人们会查看源代码以了解我的意思（尽管如此，我应该把它放在这里）

<nav>
    <div class="container">
        <ul class="group" id="effects">
            <li><a href="index.php" title="View the latest news">News</a></li>
            <li><a href="about.php" title="Find out more about us">About</a></li>
            <li><a href="#" title="Find out about races">Races</a></li>
            <li><a href="#" title="Find out what tools we use">Tools</a></li>
            <li><a href="#" title="Read the Frequently Asked Questions">FAQ</a></li>
            <li><a href="contactus.php" title="Contact us">Contact Us</a></li>
        </ul>
    </div>
</nav>

感谢。

Answer 1

我认为你可以这样简单：

$(function(){
    $('a').filter(function() {
      return (this.href == location.href);
    }).parent('li').addClass('current_page_item');
});

通过href属性过滤锚标记。似乎可以解决这个问题JSFiddle。出于某种原因，你必须点击它才能工作。

Answer 2

我认为li标签是锚标签的父级，而不是你可以试试这个 -

$(this).parent().addClass('current_page_item');

代替：

$(this).parent('li').addClass('current_page_item');

Answer 3

根据您在问题中提供的少量信息，我建议（虽然这是未经测试的）：

var file = document.location.href.split('/').pop();
$('li a').filter(function(){
    return this.href.indexOf(file) !== -1;
}).parent().addClass('current_page_item');

这将获取当前页面URL的内容并按/字符拆分，然后将数组的最后一个元素分配给变量file，例如：

'http://example.com/directory/page.html'

转换为数组：

["http:", "", "example.com", "directory", "page.html"]

该数组的最后一个元素被赋值给变量，因此file等于：

'page.html'

jQuery迭代a元素中的每个li元素，然后，如果它在page.html属性中找到字符串href，则返回a元素} element，并将class-name添加到其父元素。

相反，您可以使用完整的document.location.href;这会给：

var page = document.location.href;
$('li a').filter(function(){
    return this.href == page;
}).parent().addClass('current_page_item');

这的工作方式大致相同，但它没有查看是否可以在URL中找到文件名，而是检查元素的href是否完全等于当前document.location.href。

参考文献：

JavaScript的：
- Array.pop()。
- String.indexOf()。
- String.split()。 * jQuery的：
- filter()。

将类添加到父LI，其中A =当前文档？

3 个答案: