jQuery在活动状态下建立链接

Question

我正在研究一个HTML模板，但我无法触及HTML代码，我只能处理CSS和JS文件。 所以我不能以任何方式编辑HTML代码。

我想要实现的是当jQuery或Javascript识别出当前页面URL与我想要处于活动状态的链接相同时，将某些链接置于活动状态，而不编辑HTML代码。

有办法吗？ 我试过很多方面，但没有运气。

这是HTML代码（记住我无法编辑它）。

<span class="Tag_Nav_Aux">
    <a href="/my-account/create-account.aspx">Create&nbsp;Account</a>
    &nbsp;|&nbsp;
    <a href="/my-account/login.aspx">Login</a>
    &nbsp;|&nbsp;
    <a href="/my-cart/default.aspx">My Cart</a>
</span>

除了我上面报告的链接之外，jQuery或Javascript代码应该在不同的链接上工作，因为HTML在用户登录或注销时会发生变化。 因此，jQuery的应该指向类Tag_Nav_Aux和活动类添加到任何a标签就会发现，有链接相同的当前URL。

Answer 1

你可以做这样的事情。 您的文件名来自URL

var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

之后从导航中获取锚点并应用一些类。

$("span.Tag_Nav_Aux a[href*="+filename+"]").addClass('active');

在这里，您必须编写一个CSS active类，使该链接看起来像一个活动链接。

Answer 2

试试这个脚本

jQuery(function($){
    $('.Tag_Nav_Aux a').filter(function(){
       return $(this).attr('href').toLowerCase() === window.location.pathname.toLowerCase();
    }).addClass('active');
});

并为其创建CSS规则

.Tag_Nav_Aux a.active{
   // style you want the active link to have
}

Answer 3

$(document).ready(function() {
    var url = window.location.href.toLowerCase();

    $(".Tag_Nav_Aux a").each(function() {

        var $this = $(this);

        var href = $this.attr("href").toLowerCase();

        if(url.indexOf(href) > -1) {
            $this.addClass("active");            
        }           
    });
});​

Answer 4

我认为您需要检查当前页面网址并为项目分配类似活动的类。

我通常在服务器端代码的帮助下，基于当前URL匹配来放置class =“active”。

但是如果你不想要服务器代码，你可以使用JavaScript

var currentPage=window.location.href;

if(currentPage=="") 
{ 
 //logic to find and add a Class for the proper anchor tag
 }