如何循环 jquery selectros

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

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

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

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

DEMO

Answer 2

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

如何循环 jquery selectros

how to loop through jquery selectros

jquery

jquery-selectors

DEMO