单击<li>菜单中的名称时，如何根据标签进行分类

Question

我是MVC中的新手。我面临一个小问题，我无法弄清楚如何做。

单击菜单中的名称时，我希望单击的<li>标签的类名为"活动"。

<li><a href="#">Home</a></li>
<li><a href="#">Our Menu</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">Contact</a></li>

例如：当我单击"博客"时，我希望它像这样：<li class="active"><a href="#">Blog</a></li>或单击"存储" <li class="active"><a href="#">Store</a></li>

时

有一种简单的方法吗？如果是，如果它不会打扰您，您会与我分享吗？谢谢。

Answer 1

由于您使用的是jQuery，因此可以使用其AddClass和Removeclass方法。但是首先，您需要订阅<li>元素的点击事件。$(document).ready()处理程序是这样做的理想场所：

$(document).ready(function () {
    // narrow down the selector by specifying the parent ul element's id or class
    $("li").on("click", function(e) {
        var sender = $(e.target).closest("li");
        sender.siblings(".active").removeClass("active");
        sender.addClass("active");
    });
});

Answer 2

您可以轻松地编写几行JavaScript代码（菜单之后）以检查当前页面的URL：

<div id='menu'>
  <li><a href="#">Home</a></li>
  <li><a href="#">Our Menu</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Gallery</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Contact</a></li>
</div>
var href = window.location.href;
var menu = document.getElementById('menu');
if(href == 'SOME THING') 
   menu.children[0].className = 'active';
if(href == 'SOME THING ELSE') 
   menu.children[1].className = 'active'; ///.....

，如果您与链接中的URL和文本之间有任何关系（家庭，我们的菜单，博客...），请更容易填充相关菜单...

更好地理解您的问题下的"乔纳森·伍德"的评论。