JS如何实现简单tab选项卡切换
JS如何实现简单tab选项卡切换
发布时间：2021-04-19 11:29:08 来源：高防服务器网 阅读：108 作者：小新 栏目：web开发
这篇文章将为大家详细讲解有关JS如何实现简单tab选项卡切换，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
本人在上一篇文章也写了用JS来实现tab选项卡切换效果，但是上次的那个代码比较复杂，这次是简化版的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tab效果</title> <style type="text/css"> ul{ list-style: none; } *{ margin: 0; padding: 0; } #tab{ border: 1px solid #ccc; margin: 20px auto; width: 403px; border-top: none; } .list ul{ overflow: hidden; } .list li{ float: left; } .list li{ padding-left: 28px; padding-right: 28px; padding-top: 6px; padding-bottom: 6px; border: 1px solid #ccc; background: -moz-linear-gradient(top, #FEFEFE, #EDEDED); background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed)); border-right: none; cursor: pointer; } #listCon{ height: 100px; } #listCon div{ padding:10px; position:absolute; opacity:0; filter:alpha(opacity=0); } .list li:first-child{ border-left: none; } .list li:hover{ background: #fff; border-bottom: none; } .list li.cur{ background: #fff; border-bottom: none; } #listCon div.cur{ opacity:1; filter:alpha(opacity=100); } </style> </head> <body> <div id="tab"> <div class="list"> <ul> <li class="cur">许嵩</li> <li>周杰伦</li> <li>林俊杰</li> <li>陈奕迅</li> </ul> </div> <div id="listCon"> <div class="cur">断桥残雪、千百度、幻听、想象之中</div> <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div> <div>被风吹过的夏天、江南、一千年以后</div> <div>十年、K歌之王、浮夸</div> </div> </div> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("tab"); var lis = oDiv.getElementsByTagName("li"); var oDivCon = document.getElementById("listCon"); var lisDiv = oDivCon.getElementsByTagName("div"); for(var i=0;i<lis.length;i++){ lis[i].index = i; lis[i].onmouseover = function(){ show(this.index); } } function show(a){ for(var j=0;j<lis.length;j++){ lis[j].className = ""; lisDiv[j].className = ""; } lis[a].className = "cur"; lisDiv[a].className = "cur"; } } </script> </body> </html>
关于“JS如何实现简单tab选项卡切换”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[