JQuery導航突出顯示dropmenu.js

Question

我是新來的JQuery，但我發現它非常有用。我試圖突出顯示用戶使用JQuery的當前頁面的導航項。我已經嘗試了幾種我發現的類似的技術，但是我無法得到任何正確的工作，我不知道是否因爲我使用dropmenu.js，這可能會導致一些問題。

我創建了一個名爲.selected的CSS類，它可以在手動應用到導航項時完成我需要的CSS類。然後我有以下的jQuery代碼：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$('#nav-one li a').click(function() { 
$(this).closest("li").addClass('selected').siblings().removeClass('selected'); 
return(false); 
}); 
</script> 

我的菜單看起來像這樣：

<ul id="nav-one" class="dropmenu css-only"> 
<li><a href="index.html">Home</a></li> 
<li><a href="our_cupcakes.html">Our Cupcakes</a> 
<ul> 
<li><a href="birthday_cupcakes.html">Birthday Cupcakes</a></li> 
<li><a href="new_baby_cupcakes.html">New Baby Cupcakes</a></li> 
<li><a href="anniversary_cupcakes.html">Anniversary Cupcakes</a></li> 
<li><a href="just_because_cupcakes.html">Just Because Cupcakes</a></li> 
<li><a href="seasonal_cupcakes.html">Seasonal Cupcakes</a></li> 
<li><a href="special_order_cupcakes.html">Special Order Cupcakes</a></li> 
</ul> 
</li> 
<li><a href="flavours_and_colours.html">Flavours &amp; Colours</a></li> 
<li><a href="faqs.html">FAQs</a> 
<ul> 
<li><a href="faqs.html">General questions</a></li> 
<li><a href="faqs.html#ingredients">Ingredients</a></li> 
<li><a href="faqs.html#delivery">Delivery &amp; Pick-up</a></li> 
<li><a href="faqs.html#about">About us</a></li> 
</ul> 
</li> 
</li> 
<li><a href="order_cupcakes.php">Order Cupcakes</a> </li> 
</ul>   

Dropmenu.js做我的下拉菜單中的工作，有一個爲一個單獨的CSS，但我可以看不到這會阻止我使用JQuery將.selected類應用於導航項，但我可能是錯的。

有人能給我一些提示，我可能會出錯的地方嗎？最終的代碼將坐在我妻子的家烘焙網站http://cupcakes.ladybirdbakery.co.uk

非常感謝。

螞蟻

Answer 1

編輯2： 我不知道你是刻意突出頁面的用戶是在菜單選項。這是完全不同的事情，你現在正在做的是接近我的錯誤方式，原因如下：當用戶點擊一個鏈接時，類selected被添加到<li>。但隨後加載了一個全新頁面。 JavaScript（和jQuery）對網頁所做的更改不會保留在將來的頁面上。所以這意味着當新的頁面加載時，<li>沒有selected類，直到有人點擊一個（但隨後另一個頁面將立即加載，所以他們不會看到li突出顯示）。
至於如何實現這一點，我會建議在每個HTML文件中手動添加類selected到正確的li。但是，如果你真的想使用JavaScript，下面的代碼：

$(function(){ // this is a shortcut for $(document).ready(function(){ 
    var filename = location.pathname.substring(location.pathname.lastIndexOf('/')+1) 
    $('a[href="' + (filename ? filename : 'index.html') + '"]').parent('li').addClass('selected') 
}) 

所以首先我們創建一個變量filename並將其設置爲當前頁面的文件名。然後我們找到所有<a> s，其href屬性等於文件名，得到它們的父母<li>元素，並添加類selected。 我希望這可以幫助。如果您有更多問題或疑問，請告訴我。謝謝！