Use javascript to implement simple tab switching_javascript tips-JS Tutorial-php.cn

The code is quite concise and easy to understand, so there won’t be much nonsense.

Give me the code directly:

Copy code The code is as follows: *{ font-size: 14px;margin: 0px;} a{color:#a0b3d6;text-decoration: none;} .tabs{border:1px solid #a0b3d6;margin:100px;width:350px;} .tabs-nav a{background:#eaf0fd; line-height:30px;padding:0px 20px 0px 20px;display:inline-block;border-right:1px solid #a0b3d6;border-bottom:1px solid #a0b3d6; float: left;} .tabs-nav .on{background:white; border-bottom:1px solid white; position:relative;} .tabs-content{display: block; padding:20px;border-top:1px solid #a0b3d6; margin-top:-1px;} .tabs-content_hide{display: none;}

Homepage Technology life Works Homepage

Technology

Life

Works

------demo.js---------------

Copy code

The code is as follows: window.onload=function(){ tabs("tabs","mouseover"); } function tabs(id,trigger){ var tabBtn = document.getElementById(id).getElementsByTagName("h2")[0].getElementsByTagName("a"); var tabsContent = document.getElementById(id).getElementsByTagName("p"); for(var i=0;i tabBtn[i].index = i; if(trigger=='mouseover'){ tabBtn[i].onmouseover=function(){ clearClass(); this.className="on"; showContent(this.index); } } function showContent(n){ for (var i=0; i tabsContent[i].index = i; tabsContent[i].className = "tabs-content_hide"; } tabsContent[n].className="tabs-content"; } function clearClass(){ for(var i=0;i tabBtn[i].className=""; } } } } 是不是很简单就实现了选项卡的切换效果呢，小伙伴们自己美化下就可以用到自己项目中去了。