将样式应用于活动超链接而不为每个超链接指定一个类

时间:2012-01-26 17:45:40

标签: html css hyperlink

我希望用户通过突出显示超链接来了解他们当前所在的页面。

如果重要的话,我没有使用按钮列表(<li>),我只是使用链接。

我不想让每个链接在每个页面上都有一个类来判断它是否处于活动状态。

有没有这样做而不给每个活动链接一个类?

我已经研究了这个问题,从我看到的jQuery可能是一种可能性,但我更喜欢使用它,因为我没有在jQuery上搞砸。如果有人知道任何jQuery解决方案,我会很高兴看到它们!

任何自动主动链接探测器? :)

2 个答案:

答案 0 :(得分:1)

在我的脑海中,我会通过抓住所有<a>元素(或某个分组中的元素,或类中的导航元素)并检查CURRENT URL == {{1 }}

像这样:

a.href

如果你添加jQuery,它将使你的选择器更容易造型等。

答案 1 :(得分:1)

我认为这可行,但我没有测试过。
它使用的是jQuery,而且非常易读。
但是,您应该处理路径名,以便在hrefHasPath函数中只包含匹配所需的部分。

var links = $("#links a");               // gets all links within something with an id of "links"
var pathname = window.location.pathname; // current url
//for each link see if the href has something in the path, and if it does add a css class
$.each(links, function(){ 
    if(hrefHasPath($(this).attr("href"))){
        $(this).addClass("highlight");
    } 
});

function hrefHasPath(href){
    return (href.indexOf("pathname ") != -1);
}