主页 / 问题 / 1110076
Accepted
Владислав Самохин
Asked:2020-04-14 15:03:21 +0000 UTC2020-04-14 15:03:21 +0000 UTC

点击jquery的功能

  • 772

您能告诉我为什么当您再次单击 1 个选项卡时，样式不会改变吗？当您单击其他选项卡时，一切都很好。

$(".no_active_tab").click(function() {
  $(".active_tab").removeClass("active_tab").addClass("no_active_tab");
  $(this).removeClass("no_active_tab").addClass("active_tab");

});
.tabs_name .no_active_tab {
  display: table-cell;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-right: 1px solid #f3f3f3;
  cursor: pointer;
  background: #f6f8fa;
}

.tabs_name .active_tab {
  background: #fff;
  color: inherit;
  display: table-cell;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-right: 1px solid #f3f3f3;
  cursor: pointer;
  background: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="card" class="tabs">
  <div class="tabs_name">
    <div data-open="are_settings" class="active_tab">
      1
    </div>
    <div data-open="shop_settings" class="no_active_tab">
      2
    </div>
    <div data-open="account_settings" class="no_active_tab">
      3
    </div>
    <div data-open="tarif_settings" class="no_active_tab">
      4
    </div>
  </div>
</div>

html

1 个回答

  1. Best Answer

    因为当您在单击页面加载时挂起事件处理程序时，第一个元素没有 class no_active_tab，因此事件会挂在最初具有此类的那些元素上。因此，在给定的类被添加到第一个元素之后，什么也没有发生。tabs-item例如，为所有元素添加一个通用类并在其上挂一个事件，您会很高兴

    $(".tabs-item").click(function() {
  $(".active_tab").removeClass("active_tab").addClass("no_active_tab");
  $(this).removeClass("no_active_tab").addClass("active_tab");

});
    .tabs_name .no_active_tab {
  display: table-cell;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-right: 1px solid #f3f3f3;
  cursor: pointer;
  background: #f6f8fa;
}

.tabs_name .active_tab {
  background: #fff;
  color: inherit;
  display: table-cell;
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
  border-right: 1px solid #f3f3f3;
  cursor: pointer;
  background: #fff;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="card" class="tabs">
  <div class="tabs_name">
    <div data-open="are_settings" class="active_tab tabs-item">
      1
    </div>
    <div data-open="shop_settings" class="no_active_tab tabs-item">
      2
    </div>
    <div data-open="account_settings" class="no_active_tab tabs-item">
      3
    </div>
    <div data-open="tarif_settings" class="no_active_tab tabs-item">
      4
    </div>
  </div>
</div>

    • 1

相关问题