4

我正在处理一个 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 相同的链接的任何标记。

4

4 回答 4

3

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

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

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

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

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

于 2012-12-26T11:43:23.327 回答
2

试试这个脚本

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

并为

.Tag_Nav_Aux a.active{
   // style you want the active link to have
}
于 2012-12-26T11:47:10.767 回答
2 
$(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");            
        }           
    });
});​
于 2012-12-26T11:51:44.993 回答
0

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

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

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

var currentPage=window.location.href;

if(currentPage=="") 
{ 
 //logic to find and add a Class for the proper anchor tag
 }
于 2012-12-26T11:43:34.470 回答