如何基于 URL 和 Vanity URL 将活动类添加到锚标记？答案

【问题标题】：How to add an active class to an anchor tag based on URL and Vanity URLs?如何基于 URL 和 Vanity URL 将活动类添加到锚标记？
【发布时间】：2014-08-14 18:11:54
【问题描述】：

如果 URL 是 www.mysite.com/home/，我有这个工作减去部分。如果它是 www.mysite.com/home/index.aspx，它可以工作，但如果您删除 index.aspx，它就不会。它也适用于我拥有的所有其他页面 - page2.aspx、page3.aspx 等...

另外，我可能会对页面进行 URL 重写（因此 page2.aspx 将是 page2 而 page3.aspx 将是 page3）

如何调整下面的代码以便能够将活动类添加到活动页面。

jQuery:

$(function() {
    var pgurl = window.location.href.substr(window.location.href
    .lastIndexOf("/")+1);
    $("nav a").each(function(){
        if($(this).attr("href") == pgurl || $(this).attr("href") == '')
        $(this).addClass("active");
    })
});

添加类的HTML：

 <nav class="clearfix">
  <a href="index.aspx">Home</a>
  <a href="page2.aspx">Page2</a>
  <a href="page3.aspx">Page3</a>
</nav>

【问题讨论】：

标签： javascript jquery html url window.location

【解决方案1】：

您可以简单地检查window.location.pathname

$(function() {
    $("nav a").each(function(){
        if($(this).attr("href") == window.location.pathname || window.location.pathname == '')
        $(this).addClass("active");
    })
});

【讨论】：

/ 不起作用。因此，如果它是 www.mysite.com/home/ 它不会将活动类添加到 Home
@RooksStrife 我理解错了，请检查编辑
同样的问题 - 在 / 上不起作用 - 所以如果有人输入 www.mysite.com/home/ 活动类不会添加到 Home 我假设索引页不在 URL 中。即使正在显示索引页面（如虚 URL）。
@RooksStrife 你假设它是正确的，'index.aspx' 被服务器隐藏，所以你需要再次检查。查看我的编辑
好的，window.location.pathname 就是你需要的东西。只需使用alert() 玩它并处理您需要的情况

【解决方案2】：

如果你想找到与你正在寻找的相同 url 部分的链接，你可以试试这个：

var lookup = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
$("a:regex(href, .*"+ lookup +".*)").addClass('active');

【讨论】：

根本不起作用。杀死添加任何活动的类。除非我做错了什么。
代码不起作用并阻止了活动类在相应页面上被添加到任何锚标记。

【解决方案3】：

Holy Cow 想出了如何做无索引！我不认为这会很难得到答案。仍然不确定虚荣位。可能会单独发帖。

$(document).ready(function() {

// Add active class to menu
$(function() {
    var pgurl = window.location.href.substr(window.location.href
    .lastIndexOf("/")+1);
    $("nav a").each(function(){
        if($(this).attr("href") == pgurl)
            $(this).addClass("active");
        if (pgurl == '')
                $("nav a:first-child").addClass("active");
    })
});
});

【讨论】：

【解决方案4】：

试试这个

var s = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
if(!s)
    document.querySelector("nav > a:first-child").className = "active";
else
    document.querySelector("nav > a[href*='"+s+"']").className = "active";

【讨论】：

根本不起作用。杀死添加任何活动的类。除非我做错了什么。
我错了 is distinct -1 not equal 1 现在你可以再试一次
与 Vlad L 相同的问题 - 在 / 上不起作用 - 所以如果有人键入 www.mysite.com/home/ 活动类不会添加到首页我假设索引页不在 URL 中。即使正在显示索引页面（如虚 URL）。
不——同样的问题 :] 好肉汁这变成了一个相当大的问题。
我又错了，我忘记写比较了：/

【解决方案5】：

我知道，也许这是愚蠢的解决方案，但是：

  var current_url = window.location.hash.substr(1);
  $('.news #' + current_url).addClass('active');

【讨论】：