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，但代码变得非常混乱。

有什么建议吗?

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>