添加不同的類到div取決於哪個李被點擊

Question

使用Elegant Themes的Divi選項卡模塊。想要根據選擇哪個選項卡來更改包含部分的背景。

什麼與我拼湊起來的代碼發生的事情是.pink被添加到#industryTabs DIV無論哪個裏有它的.et_pb_tab_active類（見截圖）： 所以，當我點擊標籤1的背景仍然是粉紅色的。還注意到，即使li.et_pb_tab_0不存在於我的腳本中，li.et_pb_tab_1也不會執行任何操作。

有人可以幫助我瞭解我在這裏錯過了什麼，如果有更有效的方法來做到這一點，請？

的jQuery：

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
      if (jQuery("li.et_pb_tab_0").hasClass('et_pb_tab_active')){ 
       jQuery("#industryTabs").addClass('pink'); 
      } 

      if (jQuery("li.et_pb_tab_1").hasClass('et_pb_tab_active')){ 
       jQuery("#industryTabs").addClass('purple') 
      } 
     }); 
</script> 

HTML

<div id="industryTabs" class="et_pb_section et_pb_section_3 et_section_regular pink"> 

    <ul class="et_pb_tabs_controls clearfix" style="min-height: 48px;"> 
      <li class="et_pb_tab_0 et_pb_tab_active"><a href="#">healthcare</a></li> 
      <li class="et_pb_tab_1"><a href="#">industrial</a></li> 
      <li class="et_pb_tab_2"><a href="#">technology</a></li> 
      <li class="et_pb_tab_3"><a href="#">finance</a></li> 
    </ul> 
</div> 

（在我刪除非重要的HTML，但#industryTabs是5級從我名單的時間/空間利益物品，所以不是直接的父母。）

還嘗試加入REM veClass

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
      if (jQuery("li.et_pb_tab_0").hasClass('et_pb_tab_active')){ 
       jQuery("#industryTabs").addClass('pink').removeClass('purple'); 
      } 

      if (jQuery("li.et_pb_tab_1").hasClass('et_pb_tab_active')){ 
       jQuery("#industryTabs").addClass('purple').removeClass('pink') 
      } 
     }); 
</script> 

Answer 1

編輯2：

有一個更好的方法，我張貼你的榜樣了。我不喜歡刪除所有顏色類的想法（它會隨着標籤的數量而呈指數增長），所以我將它更改爲一個不帶參數的removeClass，以刪除該元素的所有類，然後添加適當的任何類。仍然認爲現在有一種更好的更有效的方式我現在無法想到。

$('#industryTabs').removeClass(); 
$('#industryTabs').addClass('pink'); 
$('#industryTabs').addClass('et_pb_tab_0');   

https://jsfiddle.net/k9sayy2w/2/

編輯：

變形示例中您單擊 「選項卡」 上的每一次分配不同的顏色。

https://jsfiddle.net/k9sayy2w/1/

$('li').on('click',function(){ 
    $('.et_pb_tabs_controls li').each(function(i){ 
     $(this).removeClass('et_pb_tab_active'); 
    }); 
    $(this).addClass('et_pb_tab_active'); 

    $('.et_pb_tabs_controls li').each(function(i){ 
    if($(this).hasClass('et_pb_tab_0') && $(this).hasClass('et_pb_tab_active')){ 
     $('#industryTabs').removeClass('yellow'); 
     $('#industryTabs').removeClass('red'); 
     $('#industryTabs').removeClass('purple');   
     $('#industryTabs').addClass('pink'); 
    }   
    if($(this).hasClass('et_pb_tab_1') && $(this).hasClass('et_pb_tab_active')){ 
     $('#industryTabs').removeClass('pink'); 
     $('#industryTabs').removeClass('red'); 
     $('#industryTabs').removeClass('yellow');   
     $('#industryTabs').addClass('purple'); 
    }   
    if($(this).hasClass('et_pb_tab_2') && $(this).hasClass('et_pb_tab_active')){ 
     $('#industryTabs').removeClass('pink'); 
     $('#industryTabs').removeClass('red'); 
     $('#industryTabs').removeClass('purple');   
     $('#industryTabs').addClass('yellow'); 
    }   
    if($(this).hasClass('et_pb_tab_3') && $(this).hasClass('et_pb_tab_active')){ 
     $('#industryTabs').removeClass('pink'); 
     $('#industryTabs').removeClass('yellow'); 
     $('#industryTabs').removeClass('purple');   
     $('#industryTabs').addClass('red'); 
    }   
    }); 
}) 

這是我會做：

檢查每一個裏，尋找活動類，如果它有它做任何你需要做的：

jQuery(document).ready(function(){ 
      $('.et_pb_tabs_controls li').each(function(i){ 
       if($(this).hasClass('et_pb_tab_active')){ 
        alert($(this).text() + ' is active'); 
       } 
      }); 
     }); 

工作示例： https://jsfiddle.net/k9sayy2w/

希望它有幫助！