点击之后去取消当前的样式,给选中对象添加样式

Posted 芸芸众生!

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了点击之后去取消当前的样式,给选中对象添加样式相关的知识,希望对你有一定的参考价值。

css

.point_amount_label{
width: 120px;
height: 40px;
display: block;
float: left;
margin: 0 10px 0 0;
text-align: center;
border: 1px solid #e8e8e8;
background-color: #f7f7f7;
color: #999;
cursor: pointer;
line-height: 40px;
}

.click{
border: 2px solid #1ba9d9;;
color: #1ba9d9;
width: 120px;
height: 40px;
display: block;
float: left;
margin: 0 10px 0 0;
text-align: center;
line-height: 40px;
}

.arrow-down {
width:2px;
height:2px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid #1ba9d9;
transform: rotate(315deg);
position: absolute;
margin-top: -11px;
margin-left: 104px;

}

 

 

html:

<label id="credit_amount_20" class=" click have" amount="20">¥20.00<div class="arrow-down"></div></label>
<label id="credit_amount_50" class="point_amount_label have" amount="50">¥50.00</label>
<label id="credit_amount_100" class="point_amount_label have" amount="100">¥100.00</label>
<label id="credit_amount_0" class="point_amount_label none" >其他金额</label>

 

js:

$("label").on({
mouseover:function(){
$(this).addClass(‘click‘);
$(this).removeClass(‘point_amount_label‘);
$(this).append(‘<div class="arrow-down"></div>‘);
$(this).siblings(‘label‘).removeClass(‘click‘);
$(this).siblings(‘label‘).addClass(‘point_amount_label‘);
$(this).siblings(‘label‘).children().remove();
},
mouseout:function(){
if(!isclick){
$(this).addClass(‘point_amount_label‘);
$(this).removeClass(‘click‘);
$(this).children().remove();
}
},
click:function(){
$(".amount_input ").val(‘‘).focus();
$(‘.red-text‘).text($(this).attr(‘amount‘));
$(this).siblings(‘label‘).removeClass(‘click‘);
$(this).siblings(‘label‘).addClass(‘point_amount_label‘);
$(this).siblings(‘label‘).children().remove();
$(this).addClass(‘click‘);
$(this).removeClass(‘point_amount_label‘);
$(this).append(‘<div class="arrow-down"></div>‘);
isclick=true;
}
});

 

光标事件:

$(‘.amount_input‘).blur(function(){
var val=$(‘.amount_input‘).val();
$(‘.red-text‘).text(val);

});

以上是关于点击之后去取消当前的样式,给选中对象添加样式的主要内容,如果未能解决你的问题,请参考以下文章

给当前页或者跳转后页面的导航栏添加选中样式

如何给引入的公共的当前导航添加样式???

javascript的点击跳转之后,怎么添加样式

仿微信 发起群聊 类似样式

在列表中,点击不同列表项,改变为当前选中样式

a标签点击跳转页面后怎么给当前点击的a标签用jquery添加一个样式