Verwenden Sie Javascript, um einfache Tab-Switching-Javascript-Tipps zu implementieren-js-Tutorial-php.cn

Der Code ist recht prägnant und leicht zu verstehen, sodass es nicht viel Unsinn gibt.

Geben Sie mir den Code direkt:

Code kopieren Der Code lautet wie folgt: *{ Schriftgröße: 14px;Rand: 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: links;} .tabs-nav .on{background:white; border-bottom:1px solid white;position:relative;} .tabs-content{display: block; padding:20px;border-top:1px solid #a0b3d6; .tabs-content_hide{display: none;}

Homepage & Lt; a href = "JavaScript:;" & gt; Technologie & lt;/a & gt; & Lt; a href = "JavaScript:;" & gt; Leben & lt;/a & gt; Works Homepage

Technologie

Life

Works

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

Code kopieren

Der Code lautet wie folgt: window.onload=function(){ tabs("tabs","mouseover"); } Funktion 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); } } Funktion showContent(n){ for (var i=0; i tabsContent[i].index = i; tabsContent[i].className = "tabs-content_hide"; } tabsContent[n].className="tabs-content"; } Funktion clearClass(){ for(var i=0;i tabBtn[i].className=""; } } } } 是不是很简单就实现了选项卡的切换效果呢,小伙伴们自己美化下就可以用到自己项目中去了.