：
HTML:
<v> <h2 id = "tab1" onMouseOver = "ChangeTab1 ()"> 1 </h2> <h2 id = "tab2" onMouseOver = "Changetab2 ()"> 2 </h2> <h2 id = "tab3" onMouseOver = "Changetab3 ()"> 3 </h2> </v> <v> <v> <v ID = "C1"> Contenu id = "C2"> Content2 </div> <div id = "C3"> Content3 </div> </div>
CSS:
H2 {Border-Top: solide CornflowerBlue 1px; Border-Left: Solid CornflowerBlue 1px; largeur: 50px; hauteur: 25px; marge: 0; float: gauche; Text-Align: Center;}. Tab-content {Border: Solid CornflowerBlue 1px; Width: 152px; hauteur: 100px;}. {Background-Color: CornflowerBlue;}. Tab-Content .show {affichage: Block;}JS:
var tab1 = document.getElementById ('tab1'), tab2 = document.getElementById ('tab2'), tab3 = document.getElementById ('tab3'), c1 = document.getElementById ('c1'), c2 = document.getElementById ('C2'), c3 = document.getElementyId ('C3'); fonction de fonctionnement de la fonction de la fonction de la fonction de la fonction de la fonctionnalité de fonction de fonctiontabet () de la fonction de la fonction de la fonction de changet de fonction de fonctiontab1 () de la fonction de la fonction de changet de tourb1 () de la fonction du tourtab1 () de la fonction de changet. {tab1.classname = 'selected'; tab2.classname = ''; tab3.classname = ''; c1.classname = 'show'c2.classname =' '; c3.classname =' ';} fonction changetab2 () {tab1.classname =' '; tab2.classname =' selected '; ''; c2.classname = 'show'; c3.classname = '';} fonction changetab3 () {tab1.classname = ''; tab2.classname = ''; tab3.classname = 'sélectionné'; c1.classname = '' c2.classname = ''; c3.classname = 'show';}：
实现 onglet 的切换 ， 我们很容易想到的一种方式就是给每一个要控制的标签添加 id ， 然后分别编写鼠标事件 ， 使用 id 获取每个元素 ， 精确地控制每个元素的样式。
这种方式的缺点显而易见 ， 有几个元素就有几个 id ， 每个 onglet 都要编写 fonction ， 里面的方法大同小异。要增加 onglet 的话 ， 还要增加 id 和 fonction ， 代码冗余 ， 不易扩展。
第二种较为高明些的方法是编写一个 Fonction ， 将每个元素的序号传进去。
HTML ：
<v> <h2 onMouseOver = "Changetab (0)"> 1 </h2> <h2 onMouseOver = "Changetab (1)"> 2 </h2> <h2 onMouseOver = "Changetab (2)"> 3 </h2> </v> <v> <v> content1 </v> <v> contenu </v> <v> contenu3 </ div>
JS ：
var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagName ('h2'), contente = document.getElementsByClassName ('tab-contron') [0] .getElementsByTagName ('div'); fonction changetab (index) {pour (var i = 0, len = tab === index) {tabs [i] .classname = 'selected'; contenu [i] .classname = 'show';} else {tabs [i] .classname = ''; contenu [i] .classname = ''; }}}这样就只要写一个 Fonction 了 ， 而且不需要 id ， 但是还是要按照顺序传递参数。
第三种方式和第二种基本一样 ， 只是参数传递的是 ce 指针。
HTML ：
<v> <h2 onMouseOver = "Changetab (this)"> 1 </h2> <h2 onMouseOver = "Changetab (this)"> 2 </h2> <h2 onMouseOver = "Changetab (this)"> 3 </h2> </v> <v> <v> content1 </v> <v> contenu2 </v> <v> contenu3 </ div>
JS ：
var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagName ('h2'), contente = document.getElementsByClassName ('Tab-Continte') [0] .getElementsByTagName ('div'); fonction changetab (tab) {pour (var i = 0, len = tab {if (tabs [i] === tab) {onglets [i] .classname = 'selected'; contenu [i] .classname = 'show';} else {onglets [i] .classname = ''; contenu [i] .className = '';}}}这种方式稍微方便一些 ， 只要传递 Ce 指针 ， 不用按照顺序传递序号 ， 但这也不是最简便的方式。
：
：
HTML ：
<div> <h2> 1 </h2> <h2> 2 </h2> <h2> 3 </h2> </div> <div> <div> Content1 </div> <div> Content2 </div> <div> Content3 </div> </div>
JS ：
var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagName ('h2'), contente = document.getElementsByClassName ('Tab-Content') [0] .getElementsByTagName ('DIV'); (fonction changetab (tab) {pour (var i = 0, len = tab {onglets [i] .onMouseOver = showTab;}}) (); fonction showtab () {for (var i = 0, len = tabs.length; i <len; i ++) {if (tabs [i] === this) {onglets [i] .classname = 'selected'; contenu [i] .classname = 'show';} = ''; contenu [i] .classname = '';}}}这样 JS 、 HTML 、 CSS 就完全分离了 ， 通过 Ce œuvre 指针就可以判断当前鼠标滑过的是哪一个 指针就可以判断当前鼠标滑过的是哪一个 了。
以上所述是小编给大家介绍的最简单纯 onglet javascript 实现 标签页切换的方式 (推荐) ， 希望对大家有所帮助 ， 如果大家有任何疑问请留言 ， 小编会及时回复大家的 ， 在此也非常感谢大家对武林网网站的支持！