本文實例講述了js選項卡的實作方法。分享給大家供大家參考。具體分析如下:
一、思路
1. 取得元素;
2. for迴圈按鈕元素新增onclick(點選) 或 onmousemove(移入)事件;
3. 點選目前按鈕時會以高亮狀態顯示,透過for循環歷遍把所有的按鈕樣式設定為空在把所有div的display設定為none。
4. 點選目前按鈕新增樣式,把目前div顯示出來,display設定為block。
二、html代碼:
1 2 3 4 5 6 7 8 9 10 | <div id= "div1" >
<input type= "button" class = "active" value= "1" />
<input type= "button" value= "2" />
<input type= "button" value= "3" />
<input type= "button" value= "4" />
<div class = "div2" style= "display:block;" >11</div>
<div class = "div2" >22</div>
<div class = "div2" >33</div>
<div class = "div2" >44</div>
</div>
|
登入後複製
三、css部分:
1 2 3 4 5 6 7 8 9 10 11 | .active
{
background : #9CC ;
}
.div 2
{
width : 300px ;
height : 200px ;
border : 1px #666666 solid ;
display : none ;
}
|
登入後複製
四、js程式碼:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script>
window.onload= function (){
var odiv=document.getElementById( 'div1' );
var btn=odiv.getElementsByTagName( 'input' );
var div2=odiv.getElementsByTagName( 'div' ) ;
for (i=0;i<btn.length;i++)
{
btn[i].index=i
btn[i].onclick= function ()
{
for (i=0;i<btn.length;i++)
{
btn[i].className= ''
div2[i].style.display= 'none'
}
this .className= 'active'
div2[ this .index].style.display= 'block'
}
}
}
</script>
|
登入後複製
希望本文所述對大家的javascript程式設計有所幫助。