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。 我希望这可以帮助。如果您有更多问题或疑问，请告诉我。谢谢！