Question

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

点击菜单中的名称后，我希望点击的<li>代码的类名称为＆＃34;有效＆＃34;。

<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>

例如：当我点击＆＃34; Blog＆＃34;时，我希望它是这样的：<li class="active"><a href="#">Blog</a></li>或当我点击＆＃34; Store＆＃34; <li class="active"><a href="#">Store</a></li>

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

Answer 1

由于您正在使用jQuery，因此您可以使用其addClass和removeClass方法。但首先您需要订阅<li>元素的click事件。 $(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代码（菜单后）查看当前页面的网址：

<plugin>
  <artifactId>maven-assembly-plugin</artifactId>
  <configuration>
    <archive>
      <manifest>
        <mainClass>fully.qualified.MainClass</mainClass>
      </manifest>
    </archive>
    <descriptorRefs>
      <descriptorRef>jar-with-dependencies</descriptorRef>
    </descriptorRefs>
  </configuration>
  <executions>
    <execution>
      <id>make-assembly</id> <!-- this is used for inheritance merges -->
      <phase>package</phase> <!-- bind to the packaging phase -->
      <goals>
        <goal>single</goal>
      </goals>
    </execution>
  </executions>
</plugin>

如果你在url和链接中的文本之间有任何关系（主页，我们的菜单，博客......）它会更容易使相关菜单更好...

为了更好地理解“Jonathan Wood”在你的问题下的评论。

如何点击菜单中的名称时，如何对<li>标记进行分类

2 个答案: