PROMULGATOR

    万动力-吴爱敏

    山东省
    Html
    Css
    Js
1
2
3
4
5
6
7
<ul class="list-top fle fle_b">
    <li class="active">tab1</li>
    <li>tab2</li>
    <li>tab3</li>
    <li>tab4</li>
    <li>tab5</li>
</ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
28
29
30
31
32
33
34
35
36
37
38
39
40
* {
    padding:0;
    margin:0
}
ul,li {
    list-style:none;
}
.list-top {
    padding:0 14px;
    width:100%;
    height:40px;
    line-height:40px;
    position:fixed;
    z-index:99999;
    top:44px;
    background:#FD1717;
}
.list-top li {
    color:#FCC2C2;
    font-size:14px;
}
.list-top li.active {
    color:#FFFFFF;
    border-bottom:1px solid #FFFFFF;
}
.fle {
    display:flex;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
}
.fle_b {
    justify-content:space-between;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -moz-box-pack:justify;
    -ms-flex-pack:justify;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
$('.list-top li').click(function(){
    var index = $(this).index();
    $('.list-top li').removeClass('active');
    $(this).addClass('active');
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

tab选项卡切换

0