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

Question

我想要完成的事情：

当一个标签被点击时，父 div 的背景会变成特定的颜色。

我对 jQuery 代码的想法是删除类（）（当前类），然后添加新类。但似乎我需要添加一个动态类，因为一旦单击 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 的值，这仅在文档加载时设置，您需要在单击选项卡时更新它（推荐）或在旁边更新它类（不是很推荐）。

还有一些其他问题，例如当我认为您想使用addClass、removeClass 和hasClass 时，您正在使用attr 函数。这些函数也不需要你传入完整的类列表，只需要你想要添加或删除的那些。

解决上述问题的示例：

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

#changeMe{
  padding: 15px;
  background: white;
 }

#changeMe.blue{
  background: lightblue;
 }
#changeMe.pink{
  background: pink;
 }
#changeMe.green{
  background: lightgreen;
 }
#changeMe.blue{
  background: lightblue;
 }
 
 

<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>

因此，在这段代码中，每当单击具有类colorChange 的按钮时，我都会获取要更改其背景的元素。之后，我尝试删除它可能拥有的所有潜在背景颜色类（这部分可以做得更干净，但我想保持简单）。之后，我将单击的 id 作为类添加到背景更改元素中。如果您希望我在我的示例中澄清任何其他内容，请发表评论。

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>