点击标签和背景变化（不是标签的背景）

Question

我想实现的是：

当单击一个选项卡时，父div的背景会变为特定颜色。

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

我认为最好的工作是针对活动类，然后在“li”为“active”时向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>