Question

对于我网站的导航，我想给当前页面的所有链接添加颜色如何找到指向当前页面的链接？
链接的href类似于“../index.php”，但当前页面为http://mysite.myserver.com/index.php。

这是我目前的做法，不想工作：

String.prototype.endsWith = function(str) { return ( this.match(str + "$") == str ); }
String.prototype.startsWith = function(str) { return ( this.match("^" + str) == str ) }
String.prototype.trim = function(sec)
{
    var res = this;

    while (res.startWith(sec))
    {
        res = res.substr(sec.length);
    }

    while (res.endsWith(sec))
    {
        res = res.substr(0, res.length - sec.length);
    }

    return res;
}

并且，当文件准备就绪时：

$("a").each(
    function (i)
    {
        if (window.location.pathname.endsWith($(this).attr("href").trim(".")))
        {
            $(this).addClass("thispage");
        }
    }
);

是的，我知道这可能会为主页链接添加颜色（../index.php - 因为所有页面都以此结束！）。这就是为什么我需要更好的方法......

Answer 1

$("a[href]").filter(function() {
    return window.location.pathname === this.pathname;
}).addClass("thispage");

关于您的评论，如果window.location是一个目录，您可以创建一个以index.php结尾的字符串。

var win = window.location.pathname; 
if( win.slice(-1) === '/' ) { 
    win += 'index.php'; 
} 
$("a[href]").filter(function() {
    return win === this.pathname;
}).addClass("thispage");

Answer 2

这是否必须在javascript中完成？看起来在页面生成代码中设置类会更容易。

Answer 3

尝试a：已访问的课程。这允许您指定访问标记的颜色。 http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes

链接是否指向此页面？

3 个答案: