先說一下最土的一種方法:
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標籤頁切換的方式(推薦),希望對大家有所幫助,如果大家有任何疑問請留言,小編會及時回復大家的,在此也非常感謝大家對武林網網站的支持! ,在此也非常感謝大家對武林網網站的支持!