先说一下最土的一种方法
Html:
<div> <h2 id = "tab1" onmouseover = "chanGetab1 ()"> 1 </h2> <h2 id = "tab2" onmouseoverover = "changetab2 ()"> 2 </h2> <h2 id = "tab3" onmouseover = "chang3 ()"> 3 </h2> content> </div = " id = "c2"> content2 </div> <div id = "c3"> content3 </div> </div>
CSS:
H2 {Border-top: sólido cornflowerblue 1px; borda-esquerda: sólida cornflowerblue 1px; largura: 50px; altura: 25px; margem: 0; float: esquerda; text-align: Center;}. {Background-Color: 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.getElementby ('c2'), c3 = document.lement1), c2 = document.getElementby ('c2'), c3 = document.lement1), c2 = document.getElementBy ('c2'), c3 = document1 {tab1.className = 'Selected'; tab2.className = ''; tab3.className = ''; c1.className = 'SHOW'C2.ClassName =' '; c3.className =' ';} functionTab2 () {Tab1.Classname ='; Tab2.cl.Cl.Clat.Cllast =; ''; c2.className = 'show'; c3.className = '';} função ChanGetAb3 () {tab1.className = ''; tab2.className = ''; tab3.className = 'seleted'; c1.className = 'c2.className =' '; C3. C3.效果
实现 tab 的切换 ， 我们很容易想到的一种方式就是给每一个要控制的标签添加 id ， 然后分别编写鼠标事件 ， 使用 id 获取每个元素 ， 精确地控制每个元素的样式。
这种方式的缺点显而易见 ， 有几个元素就有几个 id ， 每个 tab 都要编写 função ， 里面的方法大同小异。要增加 tab 的话 ， 还要增加 id 和 função ， 代码冗余 ， 不易扩展。 不易扩展。
第二种较为高明些的方法是编写一个 Função ， 将每个元素的序号传进去。
HTML:
<div> <H2 onMouseOver = "ChanGetab (0)"> 1 </h2> <h2 onmouseover = "Changetab (1)"> 2 </h2> <h2 onmouseover = "Changetab (2)"> 3 </h2> </niv> <div> <div> content1 <//</Div "> Content2 </h2> </div> <div> <div> <//Div (//Div)">
JS:
var tabs = document.getElementsByClassName ('TAB-CELE') [0] .GETELEMENTSBYTAGNAME ('H2'), contents = document.getElementsByClassName ('tab-content') [0] .getElementsByTagName ('div'; function ChangetAb (ndice) {para (var i = 0, 0, len len ('div'; === Index) {tabs [i] .className = 'Selected'; conteúdo [i] .className = 'show';} else {tabs [i] .className = ''; conteúdo [i] .className = ''; }}}这样就只要写一个 função 了 ， 而且不需要 id ， 但是还是要按照顺序传递参数。
第三种方式和第二种基本一样 ， 只是参数传递的是 this 指针。
HTML:
<div> <H2 onMouseOver = "ChanGetab (this)"> 1 </h2> <h2 onmouseover = "Changetab (this)"> 2 </h2> <h2 onmouseover = "Changetab (this)"> 3 </h2> </niv> <div> <div> content1 <//</divm
JS:
var tabs = document.getElementsByClassName ('tabelas') [0] .getElementsByTagName ('h2'), contents = document.getElementsByclassName ('tab-content') [0] .getElementsByTagName ('div'; function ChangetAb (TAB) (Var I {if (tabs [i] === tab) {tabs [i] .className = 'selected'; conteúdo [i] .className = 'show';} else {tabs [i] .className = ''; conteúdo [i] .classname = '';}}}这种方式稍微方便一些 ， 只要传递 this 指针 ， 不用按照顺序传递序号 ， 但这也不是最简便的方式。
最简便的一种
第四种方式
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 ('tabelas') [0] .getElementsByTagName ('h2'), contents = document.getElementsByclassName ('tab-content') [0] .getElementsByTagName ('div') (function ChangetAb (TAB) {para (var i 0, {tabs [i] .onMouseOver = ShowTab;}}) (); função ShowTab () {for (var i = 0, len = tab.length; i <len; i ++) {if (tabs [i] === this) {tabs [i] .className = '»Selected'; {tabs [i] .className = ''; conteúdo [i] .className = '';}}}这样 JS 、 html 、 css 就完全分离了 ， 通过 this 指针就可以判断当前鼠标滑过的是哪一个 tab 了。
以上所述是小编给大家介绍的最简单纯 JavaScript 实现 tab 标签页切换的方式 (推荐) ， 希望对大家有所帮助 ， 如果大家有任何疑问请留言 ， 小编会及时回复大家的 ， 在此也非常感谢大家对武林网网站的支持！