0%

选择器和选中效果和

html:

1
2
3
4
5
6
7
8
<div class="contents">
<div class="tab-nav-item tab-active" >测试</div>
<div class="tab-nav-item">测试111</div>
<div class="tab-nav-item">测试22</div>
<div class="tab-nav-item">测试</div>
<div class="tab-nav-item">测试</div>
<div class="tab-nav-item">测试11</div>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style type="text/css">

.contents{

display:flex;background: #fff;padding: 10px 0px;margin: 10px;margin-bottom: 0px; overflow-x: auto;display: flex;
}

.tab-nav-item {
width:20%;flex-shrink: 0; text-align: center; position: relative; padding: 3px;
}

.tab-nav-item.tab-active:before {
content: '';
width: 70%;
height: 1px;
position: absolute;
left: 50%;
bottom: 0;
margin-left: -35%;
z-index: 4;
background-image: -webkit-gradient(linear,left top,right top,from(#ff6143),to(#ff1767));
background-image: -webkit-linear-gradient(left,#ff6143,#ff1767);
background-image: -moz-linear-gradient(left,#ff6143,#ff1767);
background-image: linear-gradient(to right,#ff6143,#ff1767);
background-color: #ff6143;
}
</style>

js:

1
2
3
4
5
6
7
8
9
10
		$(".tab-nav-item").click(function(){
$(this).addClass("tab-active").siblings().removeClass("tab-active");
var money = $(this).attr("money");
// if(money != 99){
// $(".juan_money").val(money);
// }else{
// $(".juan_money").val("");
// $(".juan_money").focus();
// }
});