PROMULGATOR

    不知道起什么名字才吸引人

    广东省深圳市
    Html
    Css
    Js
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
* {
    margin:0;
    padding:0;
}
div.tab-frame input {
    display:none
}
div.tab-frame label {
    display:block;
    float:left;
    padding:5px 10px;
    cursor:pointer
}
div.tab-frame input:checked+label {
    background:black;
    color:white;
    cursor:default
}
div.tab-frame div.tab {
    display:none;
    padding:5px 10px;
    clear:left
}
div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3) {
    display:block;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

css的tab切换

2
      三都0
      2017/7/28 10:04:03

      div.tab-frame input:nth-of-type(1):checked~.tab:nth-of-type(1),div.tab-frame input:nth-of-type(2):checked~.tab:nth-of-type(2),div.tab-frame input:nth-of-type(3):checked~.tab:nth-of-type(3)

      这一块不是很懂 应该是当div.tab-frame input:nth-of-type(n):checked 他之后的.tab:nth-of-type(n)样式display:block;的意思吧

          三都0
          2017/7/28 11:13:41

          明白了

      回复