点击标签和背景变化(不是标签的背景)
问题描述:
我想实现的是:点击标签和背景变化(不是标签的背景)
当单击一个选项卡时,父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;
}
我正在使用的代码似乎夸张的东西,可能需要少代码。
答
在这段代码
您的代码无法正常工作,因为您未更新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作为背景更改元素的类的按钮。如果你想让我澄清我的例子中的其他内容,请发表评论。
答
在您的解决方案中,您尝试删除一些我认为不完全符合您需要的属性。你想要的是重置你的背景元素的类。
我不确定您的制表符是如何制作的,但是这里有一个涉及转换表的解决方案,它将点击的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>