0

我是 JQuery 的新手，但我发现它真的很有用。我试图突出显示用户正在使用 JQuery 的当前页面的导航项。我已经尝试了几种我发现的类似技术，但我无法让任何东西正常工作，我想知道这是否是因为我正在使用 dropmenu.js，这可能会导致一些问题。

我创建了一个名为 .selected 的 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

非常感谢。

蚂蚁

4

1 回答 1

0

编辑 2：我没有意识到您试图突出显示用户所在页面的菜单选项。那是完全不同的事情，你现在做的是接近 i 的错误方式，原因如下：当用户点击一个链接时，该类selected被添加到<li>. 但是随后会加载一个全新的页面。JavaScript（和 jQuery）对网页所做的更改不会在以后的页面中持续存在。所以这意味着当新页面加载时，没有一个<li>s 有selected类，直到有人点击一个（但随后另一个页面将立即加载，所以他们不会看到li突出显示）。
至于如何实现这一点，我建议只需手动将类添加selected到正确的li在每个 HTML 文件中。但如果你真的想使用 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

于 2012-08-09T12:44:38.287 回答