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并将Active类添加到它将找到的具有与当前URL相同的链接的任何a标记。

Answer 1

你可以这样做。您的文件名来自网址

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
 }

jQuery在活动状态下建立链接

4 个答案: