點擊標籤和背景變化（不是標籤的背景）

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>