クリックしてタブと私が達成しようとしているどのような背景の変更（タブのないBG）

Question

：タブは、特定の色に親のdivの変化の背景をクリックすると

。

jQueryコードの考えは、remove（）（現在のクラス）を削除して新しいクラスを追加することでした。しかし、動的なクラスを追加する必要があるようです。なぜなら、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、removeClass、およびhasClassを使用することにしたいと考えていたときに

は、また、他のいくつかの問題があります。これらの関数では、フルクラスのリストを渡す必要はなく、追加または削除したいものだけを渡すこともできます。上記の課題対処する

例：

$(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とボタンがクリックされるたびに、私は私が変えてる要素を取得しますの背景。その後、私は潜在的なバックグラウンドカラークラスをすべて削除しようとしました（この部分はもっときれいにすることができましたが、私はそれを単純にしたかったのです）。その後、私はクリックされたボタンを背景変更要素のクラスとして追加します。あなたが私の事例で何かを明確にしたいと思ったらコメントを残してください。

Answer 2

あなたのソリューションでは、あなたが望むものではないと思ういくつかの属性を削除しようとします。あなたがしたいのは、あなたの背景要素のクラスをリセットすることです。

あなたのタブの作り方はよく分かりませんが、ここでは、クリックされたIDをあらかじめ定義されたクラスに解決する変換テーブルが含まれています。私はワードプレスのような固定システムを使って作業するとき、これはちょっと簡単だと思いますが、ここで間違っているかもしれません。

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>