完整版见https://jadyer.github.io/ <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>
本文介绍了一种使用纯HTML、CSS及JavaScript实现的网页选项卡切换效果。通过定义特定的样式规则和JavaScript函数，实现了当点击不同标题时，对应的内容区域会显示出来，而其他内容则被隐藏的效果。此方案适用于创建导航菜单或展示不同类别的信息。
扫一扫
2777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
