javascript - jQuery - 单击时添加/删除类

Question

我手头有以下问题：创建两个按钮来显示/隐藏下面的相应内容。我使用以下代码实现了它：

$(document).ready(function() {
  $("#button2").click(function() {
    $(".content1").hide();
    $(".content2").show();
  });
  $("#button1").click(function() {
    $(".content1").show();
    $(".content2").hide();
  });
});

.content1 {
  display: none;
}

.frequency {
  display: flex;
}

.frequency button {
  border: 2px solid red;
  padding: 25px 20px;
}

.frequency>button:hover,
.frequency>button.active {
  background-color: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frequency">
  <button id="button1">button1text</button>
  <button id="button2">button2text</button>
</div>
<div class="content1">text1</div>
<div class="content2">text2</div>

为了更进一步，我希望单击的最后一个按钮保持突出显示（红色）。我尝试使用 addClass，但代码变得非常混乱。

有什么建议么？

标签： javascriptjquerycssbutton

Answer 1

如果将来可能会添加更多按钮，您可以使用此解决方案，它适用于多个内容，而无需编辑您的脚本。

只需将您的按钮与属性链接，然后使用属性content-index将此索引与您的选项卡链接index

$(document).ready(function() {
  $('.toggle-content').click(function() {

    // get selected tab index
    const contentIndex = $(this).attr('content-index')

    // remove active class from content
    $('.content').removeClass('active')

    // add active class to selcted content
    $('[index=' + contentIndex + ']').addClass('active')

    // remove active class from all buttons
    $('.toggle-content').removeClass('active')

    // add active class to selcted button
    $(this).addClass('active')

  })

});

.content {
  display: none;
}

.content.active {
  display: block;
}

.frequency {
  display: flex;
  gap: 10px
}

.frequency button {
  border: 2px solid red;
  padding: 25px 20px;
}

.frequency>button:hover,
.frequency>button.active {
  background-color: red;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="frequency">
  <button class='toggle-content' content-index='1'>button1text</button>
  <button class='toggle-content active' content-index='2'>button2text</button>
  <button class='toggle-content' content-index='3'>button3text</button>
</div>
<div class="content" index='1'>text1</div>
<div class="content active" index='2'>text2</div>
<div class="content" index='3'>text3</div>