Question

任何人都可以帮我缩短以下代码或引入选择器以便更轻松地进行选择：

<body>
<ul class="mainnav">
    <li class="active"><a id="mainInfo" href="#"></a>test</li>
    <li><a id="operations" href="#"></a>test2</li>
    <li><a id="report" href="#"></a>test3</li>
    <li><a id="special" href="#"></a>test4</li>
</ul>
<script>
    $(function () {
        $("#mainInfo").click(function () {
            $(".mainnav").find("li.active").removeClass("active");
            $(".mainnav").find("li").find("a#mainInfo").parent().addClass("active");
        });
        $("#operations").click(function () {
            $(".mainnav").find("li.active").removeClass("active");
            $(".mainnav").find("li").find("a#operations").parent().addClass("active");
        });
        $("#report").click(function () {
            $(".mainnav").find("li.active").removeClass("active");
            $(".mainnav").find("li").find("a#report").parent().addClass("active");
        });
        $("#special").click(function () {
            $(".mainnav").find("li.active").removeClass("active");
            $(".mainnav").find("li").find("a#special").parent().addClass("active");
        });
    });
</script>

Answer 1

$(function(){
  $('.mainnav').on('click','li',function(){
  $('.mainnav > li').removeClass('active');
  $(this).addClass('active');
  });
});

.active{
  color: red;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <ul class="mainnav">
    <li class="active"><a id="mainInfo" href="#"></a>test</li>
    <li><a id="operations" href="#"></a>test2</li>
    <li><a id="report" href="#"></a>test3</li>
    <li><a id="special" href="#"></a>test4</li>
</ul>

Answer 2

尝试使用multiple selector来简化您的工作，

$("#mainInfo,#operations,#report,#special").click(function (e) {
      e.preventDefault();
      $(".mainnav").find("li.active").removeClass("active");
      $(this).parent().addClass("active");
});

此外，您需要将文本放在<a>标记内，因为我们将事件绑定到该标记。没有任何节点（文本节点等）<a>元素不会触发任何事件。

如何循环jquery selectros

2 个答案:

DEMO