Question

我正在编写一个包含大量“标签”的页面，每个标签都有一段文字，当您点击标签页时，这些文字应该可见。

到目前为止没有问题，我通过使用“clickfunction”和“add / removeClass”实现了这一点。但现在的事情是，有很多标签被添加到页面中，我的JS文件真的变得杂乱，引用略有不同。有更简单，更有效的方法吗？我的代码如下所示：

标签：

<li id="a2b" class="blok roze">
    <i class="fa fa-bus"><span>A2B Transfers</span></i>
</li>

标签的内容：

<div class="a2b sysBox nonVisible">
    <h3>A2B Transfers</h3>
    <p>Informatie volgt binnenkort</p>
    <div class="line"></div>
    <div class="btnBox">
        <a href="http://www.a2btransfers.com/" target="_blank">
            <div class="btnSystem">Ga naar A2B Travel</div>
        </a>
    </div>
</div>

其中一个JS片段：

$('#vakantieveilingen').click(function() {
    $('.vakantieveilingen').removeClass('nonVisible').addClass('visible');
    $('.a2b').removeClass('visible').addClass('nonVisible');
    $('.bedsonline').removeClass('visible').addClass('nonVisible');
    $('.holidaytaxis').removeClass('visible').addClass('nonVisible');
    $('.hotelbeds').removeClass('visible').addClass('nonVisible');
    $('.actievandedag').removeClass('visible').addClass('nonVisible');
    $('.alturabeds').removeClass('visible').addClass('nonVisible');
    $('.eazzypark').removeClass('visible').addClass('nonVisible');
    $('.europeesche').removeClass('visible').addClass('nonVisible');
    $('.exclusivehotels').removeClass('visible').addClass('nonVisible');
    $('.expedia').removeClass('visible').addClass('nonVisible');
    $('.floow').removeClass('visible').addClass('nonVisible');
    $('.groupon').removeClass('visible').addClass('nonVisible');
    $('.lmx').removeClass('visible').addClass('nonVisible');
    $('.med').removeClass('visible').addClass('nonVisible');
    $('.miki').removeClass('visible').addClass('nonVisible');
    $('.parkfly').removeClass('visible').addClass('nonVisible');
    $('.taxibreburg').removeClass('visible').addClass('nonVisible');
    $('.thomascook').removeClass('visible').addClass('nonVisible');
    $('.transavia').removeClass('visible').addClass('nonVisible');
    $('.jumbo').removeClass('visible').addClass('nonVisible');
});

我希望有人知道如何妥善处理这件事。

Answer 1

您可以将jQuery选择器分组为：

$('.thomascook, .transavia, .jumbo').removeClass('visible').addClass('nonVisible'); });

缩短JS代码。

Answer 2

您应该能够通过使用公共类和属性

将所有选项卡的所有内容缩小到一个单击处理程序

我不确定选择器$('#vakantieveilingen')中的ID在您的HTML中引用了什么，但您的最终结果应该非常简单，如：

$('.blok').click(function(){
   var targetClass= '.' + this.id;
   // hide all content blocks
   $('.sysBox').removeClass('visible').addClass('nonVisible');
   // show content related to this tab
   $(targetClass).removeClass('nonVisible').addClass('visible')
});

更轻松地更改多个对象的类

2 个答案: