本文实例为大家分享了js实现Tab选项卡切换效果展示的具体代码，供大家参考，具体内容如下
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tab.css"> <script src="/UploadFiles/2021-04-02/tab.js">css部分
*{ padding:0px; margin:0px; list-style: none; font-size: 14px; } #tab{ width:298px; height:120px; margin:10px; border:1px solid #eee; overflow: hidden; } .tab-nav{ width:400px; position:relative; height:27px; } .tab-nav ul{ position:absolute; width:301px; left:-1px; background-color: #f7f7f7; } .tab-nav li{ float:left; width:58px; padding: 0 1px; height:36px; background-color: #f7f7f7; border-bottom: 1px solid #eee; text-align: center; } .tab-nav li.active{ background-color: #fff; border-bottom-color:#fff; border-left: 1px solid #eee; border-right: 1px solid #eee; padding:0px; font-weight: bolder; } li a:link,li a:visited{ text-decoration: none; color:#000; } #tab-contain .mod{ margin:25px 6px 10px 6px; } #tab-contain .mod ul li{ float: left; width:143px; height:25px; overflow: hidden; }Js部分
function $(id){ return typeof id==='string'""; divs[j].style.display="none"; } this.className="active"; divs[this.title].style.display="block"; } } }
学习课程链接。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
