js實(shí)現(xiàn)選項(xiàng)卡

（一）思路：

選項(xiàng)卡就是點(diǎn)擊按鈕切換到相應(yīng)內(nèi)容，其實(shí)就是點(diǎn)擊按鈕把內(nèi)容通過(guò)display(block none)來(lái)實(shí)現(xiàn)切換的。

1、首先獲取元素。

2、for循環(huán)歷遍按鈕元素添加onclick 或者 onmousemove事件。

3、因?yàn)辄c(diǎn)擊當(dāng)前按鈕時(shí)會(huì)以高亮狀態(tài)顯示，所以要再通過(guò)for循環(huán)歷遍把所有的按鈕樣式設(shè)置為空和把所有DIV的display設(shè)置為none。

4、把當(dāng)前按鈕添加樣式，把當(dāng)前DIV顯示出來(lái)，display設(shè)置為block。

注：給多個(gè)元素添加多個(gè)事件要用for循環(huán)歷遍。如選項(xiàng)卡是點(diǎn)擊切換，當(dāng)前按鈕高度，點(diǎn)擊和按鈕高亮就是2個(gè)事件，所以要用2個(gè)for循環(huán)歷遍。

?

HTML代碼：

<div id="box">
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" />
<input type="button" value="4" />

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

?

CSS代碼：

?

?

?

?

Javascript代碼：

<script>
window.οnlοad=function()

{
var box=document.getElementById('box');
var input=box.getElementsByTagName('input');
var div=box..getElementsByTagName('div');

for(var i=0;i<input.length;i++)

{ //循環(huán)歷遍onclick事件
input[i].index=i; //input[0].index=0 index是自定義屬性
input[i].οnclick=function(){
for(var i=0;i<input.length;i++)

{ //循環(huán)歷遍去掉button樣式和把div隱藏
input[i].className='';
div[i].style.display='none';
};
this.className='active'; //當(dāng)前按鈕添加樣式
div[this.index].style.display='block'; //div顯示 this.index是當(dāng)前div 即div[0]之類的
};
};
};
</script>

posted on 2016-10-11 17:51 WFaceBoss 閱讀(...) 評(píng)論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/wfaceboss/p/5950227.html

超強(qiáng)干貨來(lái)襲 云風(fēng)專訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的js实现选项卡的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。