Question

使用优雅主题＆＃39; Divi标签模块。想要根据选择的选项卡更改包含部分的背景。

我拼凑的代码所发生的事情是.pink正被添加到#industryTabs div中，无论哪个li上有.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级，所以不是直接的父级。）

还尝试添加removeClass

<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');
     }           
   });
})

这就是我要做的：

检查每个li并查找活动类，如果它有它做你需要做的任何事情：

 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/

希望它有所帮助！

根据点击的li添加不同的div类

1 个答案: