javascript - 如何在 ul li 中嵌套的 anchor 标记中添加事件类

Question

我遇到了这样的情况:我想在单击 anchor 标记时添加一个事件类，该标记嵌套在 ul li 中，并自动在左侧 sibling 事件类上删除。

类似地，在下面我有另一个 div，其中有 4 个 div。意味着当单击第一个 anchor 标记时，下面的第一个 div 将变为事件状态，反之亦然。我尝试了下面的代码，但它向所有 anchor 标记添加了事件类。我是 jquery 初学者。

$(document).ready(function() {
  $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
    e.preventDefault();
    $(this).siblings('a.active').removeClass("active");
    $(this).addClass("active");

    var index = $(this).index();
    console.log('index = ', index);

    if (index == 3) {
      // console.log('index is 3');
      $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
      $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
      $('.map-control-cover').hide()
      $('.checkout-control-cover').show();
    } else {
      // console.log('i am here');
      $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
      $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
      $('.map-control-cover').show()
      $('.checkout-control-cover').hide();
    }
  });
});

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 bhoechie-tab-container">
  <div class="bhoechie-tab-menu">
    <div class="list-group">
      <ul class="tab-manu">
        <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
          <a href="#" class="list-group-item text-center active">
            <span class="glyphicon glyphicon-map-marker"></span>
            <br>Location
          </a>
        </li>
        <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
          <a href="#" class="list-group-item text-center">
            <span class="glyphicon glyphicon-pencil"></span>
            <br>Labels
          </a>
        </li>
        <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
          <a href="#" class="list-group-item text-center">
            <span class="glyphicon glyphicon-edit"></span>
            <br>Customize
          </a>
        </li>
        <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
          <a href="#" class="list-group-item text-center ">
            <span class="glyphicon glyphicon-shopping-cart"></span>
            <br>Cart
          </a>
        </li>

      </ul>
    </div>
  </div>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 bhoechie-tab">
  <div class="bhoechie-tab-content active">
    <!-- content 1-->
  </div>

  <div class="bhoechie-tab-content">
    <!-- content 2-->
  </div>

  <div class="bhoechie-tab-content">
    <!-- content 3-->
  </div>

  <div class="bhoechie-tab-content">
    <!-- content 4-->
  </div>
</div>

我在控制台中进行了调试，但它在所有 anchor 标记上都显示相同的索引。

Answer 1

由于 anchor 位于列表项内，因此您需要获取父项的索引，而不是 anchor ，并处理父项的同级项。

您的 anchor 选择器不正确。 anchor 不是 div.list-group 的直接子级。

$(document).ready(function() {
  $("div.bhoechie-tab-menu>div.list-group a").click(function(e) {
    e.preventDefault();

    var li = $(this).parent();

    li.siblings().find('a.active').removeClass("active");
    $(this).addClass("active");

    var index = li.index();

    if (index == 3) {
      // console.log('index is 3');
      $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
      $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
      $('.map-control-cover').hide()
      $('.checkout-control-cover').show();
    } else {
      // console.log('i am here');
      $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
      $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
      $('.map-control-cover').show()
      $('.checkout-control-cover').hide();
    }
  });
});

.active {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 bhoechie-tab-container">
  <div class="bhoechie-tab-menu">
    <div class="list-group">
      <ul class="tab-manu">
        <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
          <a href="#" class="list-group-item text-center active">
            <span class="glyphicon glyphicon-map-marker"></span>
            <br>Location
          </a>
        </li>
        <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
          <a href="#" class="list-group-item text-center">
            <span class="glyphicon glyphicon-pencil"></span>
            <br>Labels
          </a>
        </li>
        <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
          <a href="#" class="list-group-item text-center">
            <span class="glyphicon glyphicon-edit"></span>
            <br>Customize
          </a>
        </li>
        <li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
          <a href="#" class="list-group-item text-center ">
            <span class="glyphicon glyphicon-shopping-cart"></span>
            <br>Cart
          </a>
        </li>

      </ul>
    </div>
  </div>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 bhoechie-tab">
  <div class="bhoechie-tab-content active">
    <!-- content 1-->
  </div>

  <div class="bhoechie-tab-content">
    <!-- content 2-->
  </div>

  <div class="bhoechie-tab-content">
    <!-- content 3-->
  </div>

  <div class="bhoechie-tab-content">
    <!-- content 4-->
  </div>
</div>