<style> <!-- #tab {width:600px; height:260px;} #tab h3 {float:left; width:121px; line-height:26px; margin:0 -1px 0 0; font-size:16px; text-align:center; color:#FF00FF; background:#AACC33;} #tab ul {margin:10px 0; list-style:none;} #tab div {display:none; width:600px; height:224px;} #tab li {float:left; width:50%; background:#123456;} #tab li a {display:block; line-height:25px; margin-left:8%; font-size:14px; text-decoration:none; color:#FFFFFF;} #tab li a:hover {text-decoration:underline; color:red;} #tab .block {display:block;} #tab .up {background:blue;} //--> </style> <body> <div id="tab"> <h3 onClick="go_to(1)">选择一</h3> <h3 onClick="go_to(2)">选择二</h3> <h3 onClick="go_to(3)">选择三</h3> <h3 onClick="go_to(4)">选择四</h3> <h3 onClick="go_to(5)">选择五</h3> <div class="block"> <ul> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> </ul> </div> <div> <ul> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> </ul> </div> <div> <ul> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> </ul> </div> <div> <ul> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> </ul> </div> <div> <ul> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> </ul> </div> </div> </body> <script> <!-- var h=document.getElementById("tab").getElementsByTagName("h3"); var d=document.getElementById("tab").getElementsByTagName("div"); function go_to(ao){ for(var i=0; i<h.length; i++){ if(ao-1==i){ d[i].className+=" block"; h[i].className+=" up"; }else{ h[i].className=" "; d[i].className=" "; } } } //--> </script>
利用CSS和JavaScript实现网页栏目的选择
本文介绍了一种使用CSS进行样式设计，并结合JavaScript实现内容动态切换的方法。通过简单的HTML结构，配合精心设计的CSS样式，辅以轻量级的JavaScript逻辑，可以轻松创建美观且交互良好的选项卡组件。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
