最简单纯JavaScript实现Tab标签页切换的方式(推荐)

先说一下最土的一种方法：

html：

 <div> <H2 ID =“ TAB1” id =“ C2”> content2 </div> <div ID =“ C3”> content3 </div> </div>

CSS：

 H2 {边界：固体玉米花蓝色1px;边界左：固体玉米花蓝色1px;宽度：50px;高度：25px; margin; margin：0; float：float; float; float; float; text-align; text-align; center;}。 {background-color：cornflowerblue;}。

JS：

 var tab1 = document.getElementById（'tab1'），tab2 = document.getElementById（'tab2'），tab3 = document.getElementByid（'tab3'），c1 = document.getElementById（'c1'），c2 = document.getElementByid（'c2'） {tab1.classname ='Selected'; tab2.ClassName =''; tab3.ClassName =''; c1.className ='show'c2.classname ='; c3.ClassName =';} fircon funcorn firform changetab2（） ''; c2.ClassName ='show'; c3.ClassName =''';} function changEtab3（）{ta​​b1.classname =''; tab2.ClassName =';

效果：

实现tab的切换，我们很容易想到的一种方式就是给每一个要控制的标签添加

这种方式的缺点显而易见，有几个元素就有几个，有几个元素就有几个

第二种较为高明些的方法是编写一个功能，将每个元素的序号传进去。

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'），cottents = document.getElementsByClassName（'tab-content'）[0] .getElementsBytaGname（'dive） === index）{tabs [i] .className ='selected'; contents [i] .classname ='show';} else {tabs [i] .className =''''; comentents [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'），cottents = document.getElementsByClassName（'tab-content'）[0] .getElementsbytagname（'divab'divab'; {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> content1 </div> <div> content2 </div> content2 </div> <div> content3 </div> </div> </div>

JS：

 var tabs = document.getElementsByClassName（'tab-head'）[0] .getElementsByTagName（'H2'），cottents = document.getElementsByClassName（'tab-content'）[0] .getElementsBytaGname（'div） {tabs [i] .onmouseover = showtab;}}）（）;函数showtab（）{for（var i = 0，len = tabs.length; i <len; i ++）{if（tabs [i] = = this） ='''; cONTENTS [i] .className =''';}}}}

这样js，html，css就完全分离了，通过

以上所述是小编给大家介绍的最简单纯javaScript实现tab标签页切换的方式（推荐），希望对大家有所帮助，如果大家有任何疑问请留言，小编会及时回复大家的，在此也非常感谢大家对武林网网站的支持！，在此也非常感谢大家对武林网网站的支持！