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

Posted 2023-03-06

【中文标题】单击选项卡和背景更改（不是选项卡的背景）

【英文标题】：Click Tabs and Background changes (not BG of tab)

【发布时间】：2018-01-19 06:42:46

【问题描述】：

我想要完成的事情：

当一个标签被点击时，父 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;

我使用的代码对于可能需要更少代码的东西来说似乎有些夸张。

【参考方案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 作为类添加到背景更改元素中。如果您希望我在我的示例中澄清任何其他内容，请发表评论。

【参考方案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>