jQuery的鏈接CSS類變化

我有以下主菜單：jQuery的鏈接CSS類變化

<div id="smoothmenu" class="ddsmoothmenu"> 
    <ul id="nav"> 
     <li><a href="/Home">Home</a></li> 
     <li><a href="/About">About</a> </li> 
     <li><a href="/Features">Features</a></li> 
     <li><a href="/Contact">Contact</a></li> 
     <li><a href="/Support">Support</a></li> 
    </ul> 
</div>

我想補充的「選擇」，以一個鏈接一個CSS類鏈接被點擊的時候，並從所有其他鏈接刪除CSS類在裏面。這是爲了標記用戶點擊打開的頁面。

也許這可以在某種程度上其中jQuery的讀取電流通路的頁面加載時，並添加CSS類到相應的菜單鏈接標籤來完成？

謝謝

來源

2013-10-09 elector

您正在使用AJAX來加載的內容？如果不是這樣，這將是毫無意義。 –

不，這是一個ASP.NET MVC視圖頁面佈局。像母版頁一樣。主菜單在那裏。 – elector

CSS-Tricks Snippet

比方說，你有這樣的導航：

<nav> 
    <ul> 
     <li><a href="/">Home</a></li> 
     <li><a href="/about/">About</a></li> 
     <li><a href="/clients/">Clients</a></li> 
     <li><a href="/contact/">Contact Us</a></li> 
    </ul> 
</nav>

而且你在URL：

http://yoursite.com/about/team/

並且希望關於鏈接獲取類的「活動」，讓您可以直觀地表明它是活躍導航

$(function() { 
    $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 
});

從本質上講，將匹配在誰的href屬性的導航鏈接開始「/約」（或無論次要目錄是什麼）。

Further reading...

來源

2013-10-09 12:46:54

把$（ 'NaV的[HREF^= 「/' + location.pathname.split（」/「）[1] +」 '] '）addClass（' 激活'）。在$（文件）。就緒（函數（）並獲得成功。非常感謝你 – elector

試試這個

$('div#smoothmenu').on('click', 'a', function(e){ 
    $(this).addClass('Selected').siblings('a').removeClass('Selected'); 
});

來源

2013-10-09 12:49:39

有點遲到了，但嘗試了這一點的大小...

它的每個錨元素的href屬性相比較於當前窗口上面給出的導航結構的位置。

$('.ddsmoothmenu > ul#nav > li').each(function() { 
    var $this = $(this), 
     $link = $this.children('a'), 
     path = $link.attr('href'); 

    if (path == document.location.pathname) { 
     $this.addClass('selected'); 
    } 
});

能否在行動上可見的jsfiddle：http://jsfiddle.net/LdQft/

來源

2013-10-09 13:04:30

jQuery的鏈接CSS類變化

回答

相關問題