使用jquery設置基於當前URL的活動菜單項

我想根據當前活動URL在我的導航菜單中突出顯示當前鏈接。使用jquery設置基於當前URL的活動菜單項

我發現了很多解決方案，如果我的導航菜單是純CSS，但我的菜單是基於圖像的，因此每個鏈接的活動類都不同，這就是我卡住的地方。

任何人都可以提出一些我可以使用的東西嗎？我對jQuery相當陌生，但發現它非常有用，也是我學到的最好的語言之一。

<div id="navbar"> 
    <ul class="navmenu"> 
     <li><a class="products" href="#"></a></li> 
     <li><a class="services" href="#"></a></li> 
     <li><a class="about-us" href="#"></a></li> 
     <li><a class="contact-us" href="#"></a></li> 
     <li><a class="directory" href="#"></a></li> 
     <li><a class="blog" href="#"></a></li> 
    </ul> 
</div>

每個a標籤都有一個預加載CSS背景圖像，每類有一個懸停功能。

來源

2013-06-23 user2513528

jQuery不是一種語言，一個JavaScript庫。 – undefined

URL的外觀如何？所有你需要做的就是「連接」CSS類與URL。你用ajax下載頁面還是整頁刷新？ –

您可以使用JavaScript的＃後得到的URL的一部分：

window.location.hash

然後使用jQuery再次突出顯示相關元素：

var linkClass = window.location.hash; 
$("."+linkClass).prop("class",linkClass+" highlight");

這僅僅是一個做的方式它（可能不是最優雅的）。在這種情況下，你的CSS是這樣的：

.pageOne { 

} 
.pageOne.highlight { 

}

和你的HTML這樣的：

<a href="pageOne.html#pageOne">Page One</a>

來源

2013-06-23 12:43:26 Ozzy

沒有理由基於CSS的方法將不會爲你工作。有在我的腦海兩種主要的方法：

首先，父元素地方類，FEX：

<div id="navbar"> 
    <ul class="navmenu"> 
     <li><a class="products" href="#"></a></li> 
     <!-- This is the current page --> 
     <li class="current"><a class="services" href="#"></a></li> 
     <li><a class="about-us" href="#"></a></li> 
     <li><a class="contact-us" href="#"></a></li> 
     <li><a class="directory" href="#"></a></li> 
     <li><a class="blog" href="#"></a></li> 
    </ul> 
</div>

然後，您可以使用下面的CSS規則：

.current .products { /* ... */ } 
.current .services { /* ... */ } 
.current .about.us { /* ... */ } 
.current .contact-us { /* .... */ } 
.current .directory { /* ... */ } 
.current .bloc { /* ... */ }

該解決方案允許你對每個條目都有不同的樣式，如果你需要改變圖像fex，這是很好的。

另一種方案是比較容易，如果你需要對所有條目相同的風格和基於一個元素上有多個類：

<div id="navbar"> 
    <ul class="navmenu"> 
     <li><a class="products" href="#"></a></li> 
     <!-- This is the current page --> 
     <li><a class="services current" href="#"></a></li> 
     <li><a class="about-us" href="#"></a></li> 
     <li><a class="contact-us" href="#"></a></li> 
     <li><a class="directory" href="#"></a></li> 
     <li><a class="blog" href="#"></a></li> 
    </ul> 
</div>

相應的CSS將爲：

.current { /* ... */ }

來源

2013-06-23 13:01:50 TAS

使用jquery設置基於當前URL的活動菜單項

回答

相關問題