更容易的方法來改變多個對象上的類

-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

更容易的方法來改變多個對象上的類

回答

相關問題