最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js选项卡的制作方法
时间:2017-03-03 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
/*复位*/ *{padding:0;margin:0;} div#tabs{ width:600px; height:400px; margin:100px auto; position:relative; } .tab{ width:100px; height:50px; position:absolute; top:0; } input.tab{ z-index:11; opacity:0; cursor:pointer; } a.tab{ z-index:10; text-align:center; line-height:50px; text-decoration:none; color:black; font-size:30px; } .tab1{ left:0px; } .tab2{ left:100px; } .tab3{ left:200px; } /*鼠标滑过*/ input.tab:hover+a{ background-color:#ccc; } /*鼠标点击*/ input.tab:checked+a{ border:1px solid #ccc; border-bottom:none; background-color:white; }
/*scroll设置*/ div#scroll{ position:absolute; top:50px; width:100%; height:350px; border:1px solid #ccc; overflow:hidden; } div#scroll>div.content{ width:100%; height:100%; position:absolute; top:0; left:100%; padding:15px; transition:all 0.6s linear; } input.tab1:checked~div#scroll>div.content1, input.tab2:checked~div#scroll>div.content2, input.tab3:checked~div#scroll>div.content3{ left:0%; }
哈哈111 哈哈111 哈哈111 哈哈111 哈哈111
哈哈222 哈哈222 哈哈222 哈哈222 哈哈222
哈哈333 哈哈333 哈哈333 哈哈333 哈哈333
|