PROMULGATOR

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

    江苏省苏州市
    Html
    Css
    Js

    
                        
* {
	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;
}

                        
↑上面代码改变,会自动显示代码结果 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

          明白了

      回复