更容易的方法来改变多个对象上的类

-2

我正在写一个页面有很多“选项卡”，并且他们每个都有一段文本，当你点击该选项卡时该文本应该可见。更容易的方法来改变多个对象上的类

到目前为止没有问题，我通过使用“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'); 
});

我希望有人知道如何处理好。

来源

2016-02-15 user3625849

您应该能够使用公共类规模这一切到了所有选项卡点击处理程序和属性

我不知道什么样的ID在选择$('#vakantieveilingen')是指在你的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') 
});

来源

2016-02-15 16:02:48 charlietfl

可以组jQuery选择为：

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

缩短JS代码。

来源

2016-02-15 15:32:25

更容易的方法来改变多个对象上的类

回答

相关问题