如何在ul li中嵌套的锚标记中添加活动类

Question

我遇到了这样的情况，我想单击嵌套在ul li中的锚标记并添加一个活动类，然后自动将其移出左侧兄弟姐妹。

类似地，在下面我有另一个div，其中存在4 div。表示单击第一个锚标记后，在第一个div以下的区域中，其他对象将变为活动状态，反之亦然。我在下面尝试了一个代码，但它向所有锚标签添加了活动类。我是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>

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

Answer 1

由于锚点位于列表项中，因此您需要获取父级而不是锚点的索引，并且还要处理父级的同级。

您的锚定选择器不正确。锚不是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>

Answer 2

由于您的锚标记不是兄弟标记，而是包裹在li标记周围，所以您收不到预期的结果。

因此，您可以重组代码以使其成为同级，也可以使用$(this).parent()引用目标的父对象，然后使用.find('.active')查找具有活动类的任何元素并继续使用您相同的代码。