Utilisez Javascript pour implémenter des astuces simples de commutation d'onglets_javascript

Le code est assez concis et facile à comprendre, donc il n'y aura pas beaucoup de bêtises.

Donnez-moi directement le code :

Copier le code Le code est le suivant : *{ taille de police : 14px;marge : 0px;} a{color :#a0b3d6;text-decoration : aucun;} .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; à gauche ;> .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 : aucun;}

Page d'accueil 🎜> Page d'accueil

Technologie

Vie

Works

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

Copier le code

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