先说一下最土的一种方法:
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(){tab1.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标签页切换的方式(推荐),希望对大家有所帮助,如果大家有任何疑问请留言,小编会及时回复大家的,在此也非常感谢大家对武林网网站的支持!,在此也非常感谢大家对武林网网站的支持!