javascript - 检查其他选项卡是否打开

Question

我尝试编写一个函数来检查其他选项卡是否处于事件状态，如果是，则应关闭它们并打开另一个选项卡，如果不是，则应仅打开该选项卡。我是 javascript 新手，尝试过这个，但没有成功。

HTML

<div class="showRatings">

<li role="presentation id="productInfomation" class="active">...</li>
<li role="presentation id="productDiscount">...</li>
<li role="presentation id="productRatings">...</li>

Js脚本

$('div.showRatings').click(function(){
if ( document.getElementById('productInfomation').classList.contains('active') ) {
    document.getElementById('productInfomation').classList.remove('active');
    document.getElementById('productRatings').classList.add('active');
} else if ( document.getElementById('productDiscount').classList.contains('active') ) {
    document.getElementById('productDiscount').classList.remove('active');
    document.getElementById('productRatings').classList.add('active');
} else {
    document.getElementById('productRatings').classList.add('active');
}});

Answer 1

您不需要单独为每个元素编写代码，甚至不需要测试哪个选项卡以前处于事件状态。只需一次性从所有这些元素中删除“active”类，然后将其添加到被单击的元素中即可:

$('.showRatings li').on("click", function() {
    $('.showRatings li.active').removeClass('active');
    $(this).addClass('active');
}