在激活状态下创建链接

jQuery Make a Link in Active Status

本文关键字：创建 链接 状态 激活      更新时间：2023-09-26

我正在制作一个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类添加到任何a标签中，它将发现链接与当前URL相同。

您可以这样做。URL

中的文件名
var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

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

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

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

试试这个脚本

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
}

$(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");            
        }           
    });
});​

我认为您需要检查当前页面url并为项目分配一个类。

我通常在服务器端代码的帮助下根据当前URL匹配class="active"。

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

var currentPage=window.location.href;
if(currentPage=="") 
{ 
 //logic to find and add a Class for the proper anchor tag
 }
相关文章：