先说一下最土的一种方法：
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 id = "c2"> content2 </div> <div id = "c3"> content3 </div> </div>
CSS：
H2 {ボーダートップ：ソリッドコーンフラワーブルー1px;ボーダー左：ソリッドコーンフラワーブルー1px;幅：50px;高さ：25px;マージン：0; float：left; text-align：center;}。tab-content {border：border：border：solid cornflowerblue 1px; width：152px; {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.getelementbyid（ 'c2'）、c3 = documentbyid（ 'c3'）; {tab1.classname = 'selected'; tab2.classname = ''; tab3.classname = ''; c1.classname = 'show'c2.classname =' '; c3.classname =' ';} function changetab2（）{tab1.classname =' '; tab2.classname =' sel '; classname =' sel '; classname =' sel "; ''; c1.classname = ''; c2.classname = 'show'; c3.classname = '';} function changetab3（）{tab1.classname = ''; tab2.classname = ''; tab3.classname = 'selected'; c1.classname = '' '' '' '' '效果：
实现タブ的切换、我们很容易想到的一种方式就是给每一个要控制的标签添加id、然后分别编写鼠标事件、使用id获取每个元素、精确地控制每个元素的样式。
这种方式的缺点显而易见、有几个元素就有几个id、每个タブ都要编写関数、里面的方法大同小异。要增加タブ的话、还要增加id和関数、代码冗余、不易扩展。
第二种较为高明些的方法是编写一个関数、将每个元素的序号传进去。
HTML：
<div> <h2 onmouseover = "changetab（0）"> 1 </h2> <h2 onmouseover = "changetab（1）"> 2 </h2> <h2 onmouseover = "changetab（2）"> 3 </h2> </div> <div> div> div> div> div </div </div </div </div </div <
JS：
var tabs = document.getElementsByClassName（ 'Tab-head'）[0] .getElementsByTagname（ 'h2'）、contents = document.getElementsByClassName（ 'tab-content'）[0] .getElementsBytagname（ 'div'）; function changetab（index）{for i = 0、len = 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> div> div> div </div </div </div </div </div </div </div </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 = len; i < {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> <div> <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 i = len = len = len = len = len = len = len = len = len> {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
以上所述是小编给大家介绍的最简单纯javascript实现タブ标签页切换的方式（推荐）、希望对大家有所帮助、如果大家有任何疑问请留言、小编会及时回复大家的、在此也非常感谢大家对武林网网站的支持！