如何改变CSS背景点击
how to change a css background onclick
请检查这个JSFiddle,这里有两个名为step-wrapper
的div,在这些step-wrapper
div中有三个名为step-box
的div。它是这样写的,当点击step-box
div时,其背景颜色变为黄色。
我增加了一个重置按钮。我需要的是单击重置按钮,最后单击step-box
div的颜色应该更改为白色。但是在这段代码中,当我点击重置按钮时,所有步进框的背景颜色都变成了白色。
我相信这就是你要找的:https://jsfiddle.net/richardgirges/8m9qstg3/11/
我们保存了对lastClicked
div的引用,并在reset
被击中时专门针对它。像这样:
var $lastClicked = null;
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
$lastClicked = $(this);
});
$('.reset').on('click',function(){
if ( $lastClicked ) {
$lastClicked.css( 'background-color', '#fff' );
$lastClicked = null;
}
});
编辑:改进了代码。使用显式var
实例化将其保持在范围内。 当您在最后只有一个重置按钮但只想重置一个包装器时,它看起来有点奇怪。如果我们在包装器div中添加一个重置按钮,并在每次单击重置时仅重置该包装器,会怎么样?看看你是否喜欢。
HTML:<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span>
</p>
</div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span>
</p>
</div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span>
</p>
</div>
<div class="reset"> Reset </div>
</div>
<br>
<br>Second Wrapper
<br>
<br>
<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span>
</p>
</div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span>
</p>
</div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span>
</p>
</div>
<div class="reset"> Reset </div>
</div>
Javascript:$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#eeffaa');
});
$('.reset').on('click',function(){
$( this ).parent().find(".step_box").css( 'background-color', '' );
});
将last类添加到最后一个被点击的元素中,并重置此元素。
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
$('.last').removeClass('last');
$(this).addClass('last');
});
$('.reset').on('click',function(){
$( ".step_box.last" ).css( 'background-color', '' );
});
http://jsfiddle.net/8m9qstg3/7/看这个
我所做的是,我已经添加了一个ID
属性到你的step_box
类,并使用id
设置一个隐藏的字段,当step_box
被点击。然后在重置的onClick中,我使用了隐藏字段中设置的id。
请输入下面的代码…
JS
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
document.getElementById('test').value=this.id;
});
$('.reset').on('click',function(){
var a= document.getElementById('test').value;
$( "#"+a ).css( 'background-color', '' );
});