先说一下最土的一种方法 ：
HTML:
<div> <h2 id = "tab1" onMouseOver = "changeTab1 ()"> 1 </h2> <h2 id = "tab2" onMouseOver = "changeTab2 ()"> 2 </h2> <h2 id = "tab3" onMouseOver = "changeTab3 () id = "C2"> Content2 </div> <div id = "c3"> content3 </div> </div>
CSS:
h2 {border-top: sólido maíz fllowerblue 1px; borde-izquierda: sólido maíz fllowerblue 1px; ancho: 50px; altura: 25px; margen: 0; float: izquierda; text-align: centro;}. Tab-Content {border: sólido maíz mierda 1px; width: 152px; altura: 100px;}. Tab-ctentsplip {sosting {Ninguna; {Color de fondo: CornflowerBlue;}. Tab-Content .Show {Display: 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.getElementByid ('c3'); {tab1.classname = 'seleccionado'; tab22.classname = ''; tab3.classname = ''; c1.classname = 'show'c2.classname =' '; c3.classname =' ';} function changeTab2 () {tab1.classname ''; c2.classname = 'show'; c3.classname = '' ';} function changeTab3 () {tab1.classname =' '; tab22.classname =' '; tab3.classname =' seleccionado '; c1.classname =' 'c2.classname =' ''; c3.classname = 'show';}效果 ：
实现 Tab 的切换 ， 我们很容易想到的一种方式就是给每一个要控制的标签添加 我们很容易想到的一种方式就是给每一个要控制的标签添加 ， 然后分别编写鼠标事件 使用 使用 获取每个元素 ， 精确地控制每个元素的样式。
这种方式的缺点显而易见 ， 有几个元素就有几个 ID ， 每个 Tab 都要编写 Función ， 里面的方法大同小异。要增加 Tab 的话 ， 还要增加 ID 和 Función ， 代码冗余 不易扩展。 不易扩展。
第二种较为高明些的方法是编写一个 Función 将每个元素的序号传进去。 将每个元素的序号传进去。
HTML:
<Div> <H2 onMouseOver = "Changetab (0)"> 1 </h2> <h2 onMouseOver = "Changetab (1)"> 2 </h2> <h2 onMouseOver = "Changetab (2)"> 3 </h2> </iv> <div> <div> <div> contento1 </div> <div> content2 </iv> <iv> contenga 3 </div> </div> </div>
JS:
var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagName ('h2'), contents = document.getElementsByClassName ('tab-condent') [0] .getElementsByTagName ('Div'); function ChangeTab (index) {for (var i = 0, len = tabs. i <length; i <len; i (i (if) === index) {Tabs [i] .className = 'seleccionado'; contenido [i] .className = 'show';} else {tabs [i] .classname = ''; contenido [i] .classname = ''; }}}这样就只要写一个 Función 了 ， 而且不需要 ID ， 但是还是要按照顺序传递参数。
第三种方式和第二种基本一样 ， 只是参数传递的是 esto 指针。
HTML:
<div> <h2 onMouseOver = "Changetab (this)"> 1 </h2> <h2 onMouseOver = "Changetab (this)"> 2 </h2> <h2 onMouseOver = "ChangeTab (this)"> 3 </h2> </div> <div> <div> contenido1 </div> <div> content2 </iv> <iv> contenga 3 </div> </div>
JS:
var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagName ('h2'), contents = document.getElementsByClassName ('tab-content') [0] .getElementsByTagName ('div'); function cambsetab (tab) {para (var i = 0, len = tabs. i <lenghy; i++; {if (tabs [i] === tab) {tabs [i] .classname = 'seleccionado'; contenido [i] .classname = 'show';} else {Tabs [i] .classname = ''; contenido [i] .classname = '' ';}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}这种方式稍微方便一些 ， 只要传递 只要传递 指针 ， 不用按照顺序传递序号 但这也不是最简便的方式。
最简便的一种 ：
第四种方式 ：
HTML:
<viv> <h2> 1 </h2> <h2> 2 </h2> <h2> 3 </h2> </div> <div> <div> content1 </div> <div> content2 </div> <div> content3 </div> </div> </div>
JS:
var tabs = document.getElementsByClassName ('tab-head') [0] .getElementsByTagName ('h2'), contents = document.getElementsByClassName ('tab-content') [0] .getElementsByTagName ('div'); (function cambsetab (tab) {para (var i = 0, len = tabs.ilgenty; i <len ') {Tabs [i] .onmouseover = showTab;}}) (); function showTab () {for (var i = 0, len = tabs.length; i <len; i ++) {if (tabs [i] === this) {Tabs [i] .className = 'seleccionado'; contenido [i] .classname = 'show';} = ''; contenido [i] .classname = '' ';}}}这样 js 、 html 、 css 就完全分离了 ， 通过 esta 指针就可以判断当前鼠标滑过的是哪一个 pestaña 了。
以上所述是小编给大家介绍的最简单纯 Javascript 实现 Tab 标签页切换的方式 (推荐) ， 希望对大家有所帮助 ， 如果大家有任何疑问请留言 ， 小编会及时回复大家的 在此也非常感谢大家对武林网网站的支持！ 在此也非常感谢大家对武林网网站的支持！