使用jQuery在导航栏中切换活动类

Question

<ul>
                <li id="tabHome" class="active"><a href="@Href("~")">Home</a></li>
                <li id="tabCMDS"  ><a href="@Href("~/CMDS")">CMDS</a></li>
                <li id="tabServiceMonitor" ><a href="@Href("~/Monitor")">Service Monitor</a></li>
                <li id="tabBatchInterface" ><a href="@Href("~/BatchInterface")">Batch Interface</a></li>
            </ul>

因此，我想绑定到click每个这些ID，并设置class="active"被单击的ID ，并将其从所有其他ID中删除。

我可以做第一部分，但是我该怎么做？

Answer 1

$(function() {
   $("li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

为赋予有意义的类是明智的，<li>这样您就可以适当地选择它们，但您会明白。