今天记载一下常用的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{ 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方法只用作用于同一层级的元素。