检查是否有其他标签打开

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

您不需要单独为每个元素编写代码，甚至无需测试以前哪个选项卡处于活动状态。只需删除＆＃34;活动＆＃34;将它们中的所有类放在一起，然后将其添加到单击的元素中：

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