0

I'm trying to append a class to an LI automatically if the filename matches the href (e.g; if the anchor has the href attribute set to about.php and the filename of the current page is about.php then it would append the class.) however, along the way I've hit some complications and I've been getting myself confused with the syntax a little...

So far I have this...

var filename = location.pathname.substring(1)

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

My navigation is constructed as shown here and as you can see, it works and everything but only when the class is set manually... so I'm trying to get it to be automatic from the actual filename.

I hope this make some sense to someone, as I'm really confused on how to get this working now!

Thank-you to anyone who contributes, it's of great help and will help me understand the jquery syntax further, actually selecting something specific and writing a logical statement in jquery really confuses me as it's very different to PHP, which is what I'm used to.

My markup looks like this, since I didn't include it before and just assumed people would look at the source code to understand what I was meaning (though, I should have put it here)

<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>

Thanks.

4

3 回答 3

1

我认为您可以像这样简单地做到这一点：

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

​按其 href 属性过滤锚标签。似乎在这个JSFiddle上工作。出于某种原因，您必须点击运行才能使其工作。

于 2012-12-31T10:48:26.057 回答
0

I assume that li tag is parent of anchor tag than you can try this-

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

instead: 

$(this).parent('li').addClass('current_page_item');
于 2012-12-31T10:34:45.480 回答
0

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

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元素，并将类名添加到其父元素。

当然，您可以使用 full 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.

参考：

于 2012-12-31T10:36:55.623 回答