jquery之toggleClass应用

今天记载一下常用的html + css + jquery效果应用

1.html内容

<div class="selBtn screen_btn">
<a id="project1" data-type="1" class="active">筹备期项目</a>
<a id="project2" data-type="2">运营期项目</a>
</div>

2.css内容：

.selBtn a{width: 50%; float: left; text-align: center; box-sizing: border-box; border: solid 0.03125rem #999999; line-height: 1.8125rem;}
.selBtn a.act{background: #ff9600; color: #ffffff; border: solid 0.03125rem #ff9600;}

3.jquery内容

$(function() {
//筛选选择效果
$('.screen_btn a').click(function(){
　　$(this).toggleClass("active").siblings().removeClass("active");
　　})
});

注意siblings方法只用作用于同一层级的元素。

 

转载于:https://www.cnblogs.com/michaelShao/p/5542401.html