Question

我正在努力实现的目标：

单击选项卡时，父div的背景将更改为特定颜色。

我对jQuery代码的想法是removeclass（）（当前类），然后添加新类。但似乎我需要添加一个动态类，因为一旦点击li它就会改变类，这就是为什么我添加了一个类数组。

我认为最有效的方法是定位活动类，然后在“li”处于“活动”状态时向div添加新类。

但这就是我现在所拥有的：

jQuery代码：

    jQuery(document).ready(function(){

        var $tab1 = jQuery('#fusion-tab-design');
        var $tab2 = jQuery('#fusion-tab-seocontentcreation');
        var $tab3 = jQuery('#tab-f8bdac86ea321cb8b58');
        var $tab4 = jQuery('#tab-e7e9c83e3a31ecbd7c2');
        var $element_id = ["class1","class2","class3","class4"];

        var $bgCont = jQuery('#bgcoverchangey');
        var $currClass = $bgCont.attr('fusion-fullwidth fullwidth-box fusion-blend-mode changeme hundred-percent-fullwidth');

        // $bgCont.addClass('class1'); //starts with bg 1


            $tab1.click(function(){
                if($currClass != 'fusion fullwidth fullwidth box fusion blend mode changeme hundred percent fullwidth class1'){
                     $bgCont.removeAttr('fusion-fullwidth fullwidth-box fusion-blend-mode changeme hundred-percent-fullwidth' + $element_id);
                $bgCont.addClass(' class1');
                } else {
                    return false;
                };
            });

         $tab2.click(function(){
                if($currClass != 'fusion fullwidth fullwidth box fusion blend mode changeme hundred percent fullwidth class2'){
                     $bgCont.removeAttr('fusion-fullwidth fullwidth-box fusion-blend-mode changeme hundred-percent-fullwidth'+ $element_id);
                $bgCont.addClass(' class2');
                } else {
                    return false;
                };
            });

          $tab3.click(function(){
                if($currClass != 'fusion fullwidth fullwidth box fusion blend mode changeme hundred percent fullwidth class3'){
                     $bgCont.removeAttr('fusion-fullwidth fullwidth-box fusion-blend-mode changeme hundred-percent-fullwidth' + $element_id);
                $bgCont.addClass(' class3');
                } else {
                    return false;
                };
            });

          $tab4.click(function(){
                if($currClass != 'fusion fullwidth fullwidth box fusion blend mode changeme hundred percent fullwidth class4'){
                     $bgCont.removeAttr('fusion-fullwidth fullwidth-box fusion-blend-mode changeme hundred-percent-fullwidth' + $element_id);
                $bgCont.addClass(' class4');
                } else {
                    return false;
                };
            });

   });

CSS：

.class1:{
background-color:red;
}
.class2:{
background-color:yellow;
}
.class3{
background-color:green;
}
.class4{
background-color:orange;
}

我正在使用的代码似乎夸大了可能需要更少代码的东西。

Answer 1

您的代码无法正常运行，因为您没有更新currClass的值，这只是在文档加载时设置的，您需要在单击选项卡时更新它（推荐）或与课程一起更新（不是真的推荐）。

还有一些其他问题，例如您在我认为您要使用attr，addClass和{{1}时使用removeClass功能}。这些功能并不要求您传递完整的班级列表，只需要传递或删除。

解决上述问题的示例：

＆＃13;

hasClass

＆＃13;

$(document).ready(function(){
  $(".colorChange").click(function(evt){
    var bgElement = $("#changeMe");
    bgElement.removeClass("pink green blue");
    bgElement.addClass($(this).attr("id"));
  });
});

＆＃13;

#changeMe{
  padding: 15px;
  background: white;
 }

#changeMe.blue{
  background: lightblue;
 }
#changeMe.pink{
  background: pink;
 }
#changeMe.green{
  background: lightgreen;
 }
#changeMe.blue{
  background: lightblue;
 }

＆＃13;

因此，在此代码中，只要点击了类<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="changeMe"> My background will change</div> <button type="button" class="colorChange" id="pink">Make pink!</button> <button type="button" class="colorChange" id="green">Make green!</button> <button type="button" class="colorChange" id="blue">Make blue!</button>的按钮，我就会获取我改变背景的元素。之后，我尝试删除它可能具有的所有潜在背景颜色类（这部分可以更干净地完成，但我想保持简单）。之后，我添加了被点击的按钮作为背景更改元素的类。如果您希望我在我的示例中澄清其他任何内容，请发表评论。

Answer 2

在您的解决方案中，您尝试删除一些我认为不完全符合您要求的属性。你想要的是重置背景元素的类。

我不确定您的标签是如何制作的，但这是一个涉及翻译表的解决方案，它将点击的ID解析为预定义的类。我想在使用像wordpress这样的固定系统时会有点容易 - 但我可能在这里错了。

jQuery( function( $ ) {
  // Define some basics
  const $background = $( '#bgcoverchangey' );
  // Just in case, if there are any other classes defined when loading the page - we will keep them in tact
  const defaultBackgroundClass = $background.attr( 'class' ) || '';
  
  // Define translate table, which id leads to what class
  const translateTable = {
    'tab-1': 'class1',
    'tab-2': 'class2',
    'tab-3': 'class3',
  }
  
  // One selector to catch them all
  $( '.tabs button' ).click( function() {
    // Check if id is in the translateTable
    const id = $( this ).attr( 'id' );
    const className = translateTable[ id ];
    if ( !className ) {
      return;
    }

    // Reset and append new class
    $background.attr( 'class', `${ defaultBackgroundClass } ${ className }` );
  } );
} );

#bgcoverchangey {
  /* default background class */
  background: silver;
  min-height: 30px;
}

.class1 {
  background: pink !important;
}

.class2 {
  background: skyblue !important;
}

.class3 {
  background: lightgreen !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="tabs">
  <button id="tab-1">Tab 1</button>
  <button id="tab-2">Tab 2</button>
  <button id="tab-3">Tab 3</button>
</div>
<div id="bgcoverchangey"></div>

单击选项卡和背景更改（不是选项卡的BG）

2 个答案: