Kod ini agak ringkas dan mudah difahami, jadi tidak akan ada banyak perkara karut. Beri saya kod terus: Salin kod Kod adalah seperti berikut: <p> *{ saiz fon: 14px;margin: 0px;}<br> a{color:#a0b3d6;text-decoration: none;}<br> .tabs{border:1px pepejal #a0b3d6;margin:100px;lebar:350px;}<br> .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; kiri;}<br> .tabs-nav .on{background:white; border-bottom:1px solid white; .tabs-content{display: block; padding:20px;border-top:1px solid #a0b3d6; .tabs-content_hide{display: none;}<br> <br> </head><br> <badan><br> <div class="tabs" id="tabs"></p> <h2 class="tabs-nav clearfix"><p> … ><br> & Lt; a href = "javascript :;" & gt; teknologi & lt;/a & gt; <br> & Lt; a href = "javaScript:;" & gt; life & lt;/a & gt; <br> < <div style="clear:both;"></div><br> <p class="tabs-content">Homepage</p><br> <p class="tabs-content_hide">Teknologi</p><br> <p class="tabs-content_hide">Life</p><br> <p class="tabs-content_hide">Berfungsi</p><br> <br> </body><br> <footer></footer><br> </html><br> <br><br> <br>------demo.js----------------<br> <br><br><br></p> </div>Salin kod<p></p> <p> Kod adalah seperti berikut:</p> <div class="codetitle"> <div class="codebody" id="code90492"> <br> window.onload=function(){<br> tabs("tabs","mouseover");<br> }<br> tab fungsi(id, pencetus){<br> var tabBtn = document.getElementById(id).getElementsByTagName("h2")[0].getElementsByTagName("a");<br> var tabsContent = document.getElementById(id).getElementsByTagName("p");<br> untuk(var i=0;i<tabBtn.length;i ){<br> tabBtn[i].index = i;<br> if(trigger=='mouseover'){<br> tabBtn[i].onmouseover=function(){<br> clearClass();<br> this.className="on";<br> showContent(this.index);<br> }<br> }<br> function showContent(n){<br> untuk (var i=0; i<tabsContent.length ;i ) {<br> tabsContent[i].index = i;<br> tabsContent[i].className = "tabs-content_hide";<br> }<br> tabsContent[n].className="tabs-content";<br> }<br> fungsi clearClass(){<br> untuk(var i=0;i<tabBtn.length;i ){<br> tabBtn[i].className="";<br> }<br> }<br> }<br> }<br> </div> <p>是不是很简单就实现了选项卡的切换效果呢，小伙伴们自己美化下就美化下就可他了。</p> </div>
