的jQuery做一個鏈接激活狀態

我在HTML模板工作，但我不能碰的HTML代碼，我只能對CSS和JS文件。所以我不能以任何方式編輯HTML代碼。的jQuery做一個鏈接激活狀態

我所試圖實現的是把處於主動地位的一些鏈接時的jQuery或Javascript認識到當前網頁的網址是我希望把活動狀態的鏈接的同一個，而無需編輯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。

來源

2012-12-26 user1929719

的幫助下做試一下這個腳本

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-26 11:47:10

看起來不錯。如果我們傳遞像/product/item.aspx?id=8 –

這樣的查詢字符串值，這會起作用嗎？ ''pathname'是「*此屬性表示位置的URI的路徑組件，它由主機和端口之後的所有內容組成**並排除第一個問號（？）或散列標記（＃）。***」請參閱http://www.w3.org/TR/Window/#location –

它的工作。謝謝！ – user1929719

你可以做這樣的事情。您的文件名從URL

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

之後，從導航中獲取錨並應用一些類。

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

在這裏，你必須寫一個CSS active類，這將使該鏈接出現類似的活動鏈接。

來源

2012-12-26 11:43:23 Vins

CSS規則如果我們有Url，如http：// localhost：50126/my-account/create-account。 aspx /，你的代碼將工作？什麼是文件名？ –

'create-account.aspx'如果你正確地看到了代碼，那麼它會取得最後一個'\'的索引及其內容。 – Vins

很酷...我知道了 –

我認爲你需要檢查當前頁面的URL和類分配給該項目就像爲主動。

我平時把基於當前URL匹配的服務器端代碼的幫助類=「活動」。

但是，如果你不希望服務器代碼，您可以用JavaScript

var currentPage=window.location.href; 

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

來源

2012-12-26 11:43:34

$(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-26 11:51:44

的jQuery做一個鏈接激活狀態

回答

相關問題