先说一下最土的一种方法 ：
HTML:
<div> <h2 id = "tab1" onmouseover = "Changetab1 ()"> 1 </h2> <h2 id = "tab2" onmouseover = "Changetab2 ()"> 2 </h2> <h2 id = "tab3" Onmouseover = "Changetab3 ()"> 3 </H2> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> </dived = "C1 id = "c2"> content2 </div> <div id = "c3"> content3 </div> </div>
CSS:
H2 {Border-Top: Solid CornflowerBlue 1px; граница-левая: сплошная Cornflowerblue 1px; ширина: 50px; высота: 25px; маржа: 0; float: слева; {founal-color: cornflowerblue;}.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 = 'selected'; tab2.classname = ''; tab3.classname = ''; c1.classname = 'show'c2.classname =' '; c3.classname =' ';} function Changetab2 () {tab1.classname =' '; tab2.classname =' selected '; ''; c2.classname = 'show'; c3.classname = '';} function changetab3 () {tab1.classname = ''; tab2.classname = ''; tab3.classname = 'selected'; c1.classname = '' c2.classname = ''; c3.classname = 'show';效果 ：
实现 Tab 的切换 我们很容易想到的一种方式就是给每一个要控制的标签添加 ID ， 然后分别编写鼠标事件 ， 使用 ID 获取每个元素 ， 精确地控制每个元素的样式。
这种方式的缺点显而易见 ， 有几个元素就有几个 ID ， 每个 Tab 都要编写 Функция ， 里面的方法大同小异。要增加 Tab 的话 ， 还要增加 ID 和 Функция ， 代码冗余 不易扩展。 不易扩展。
第二种较为高明些的方法是编写一个 Функция ， 将每个元素的序号传进去。
Html ：
<div><h2 onmouseover="changeTab(0)">1</h2><h2 onmouseover="changeTab(1)">2</h2><h2 onmouseover="changeTab(2)">3</h2></div><div><div>content1</div><div>content2</div><div>content3</div></div>
JS ：
var tabs = document.getElementsbyclassname ('tab-head') [0] .getelementsbytagname ('h2'), contents = document.getelementsbyclassname ('tab-content') [0] .getelementsbytagname ('div'); function Changetab (index) {for (var i = 0, len = len; === index) {tabs [i] .classname = 'selected'; contents [i] .classname = 'show';} else {tabs [i] .classname = ''; contents [i] .classname = '' '; }}}这样就只要写一个 Функция 了 而且不需要 ID ， 但是还是要按照顺序传递参数。 但是还是要按照顺序传递参数。
第三种方式和第二种基本一样 ， 只是参数传递的是 это 指针。
Html ：
<div><h2 onmouseover="changeTab(this)">1</h2><h2 onmouseover="changeTab(this)">2</h2><h2 onmouseover="changeTab(this)">3</h2></div><div><div>content1</div><div>content2</div><div>content3</div></div>
JS ：
var tabs = document.getElementsbyclassname ('tab-head') [0] .getelementsbytagname ('h2'), contents = document.getelementsbyclassname ('tab-content') [0] .getelementsbytagname ('div'); function changetab (tab) {for (var i = 0, len = len; {if (tabs [i] === tab) {tabs [i] .classname = 'selected'; contents [i] .classname = 'show';} else {tabs [i] .classname = ''; contents [i] .classname = '';}}}这种方式稍微方便一些 ， 只要传递 指针 ， 不用按照顺序传递序号 ， 但这也不是最简便的方式。 但这也不是最简便的方式。 但这也不是最简便的方式。
最简便的一种 ：
第四种方式 ：
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'), contents = document.getelementsbyclassname ('tab-content') [0] .getelementsbytagname ('div'); (function Changetab (tab) {for (var i = 0, len = len length; {tabs [i] .onmouseover = showtab;}}) (); function showtab () {for (var i = 0, len = tabs.length; i <len; i ++) {if (tabs [i] === this) {tabs [i] .classname = 'selected'; contents [i]. {tabs [i] .classname = ''; contents [i] .classname = '';}}}这样 js 、 html 、 css 就完全分离了 ， 通过 Эта вкладка 指针就可以判断当前鼠标滑过的是哪一个 了。
以上所述是小编给大家介绍的最简单纯 javascript 实现 Tab 标签页切换的方式 (推荐) ， 希望对大家有所帮助 ， 如果大家有任何疑问请留言 ， 小编会及时回复大家的 在此也非常感谢大家对武林网网站的支持！ 在此也非常感谢大家对武林网网站的支持！