首頁 > web前端 > js教程 > js選項卡的實作方法_javascript技巧

js選項卡的實作方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
發布: 2016-05-16 16:15:07
原創
1345 人瀏覽過

本文實例講述了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;

}

.div2

{

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');//获取div

   var btn=odiv.getElementsByTagName('input');//获取div下的input

   var div2=odiv.getElementsByTagName('div') ;//获取div下的div

 

  for(i=0;i<btn.length;i++)//循环每个按钮

   {

     btn[i].index=i

//btn[i]是指定button的第i个按钮;为该按钮添加一个index属性,并将index的值设置为i

     btn[i].onclick=function()//按钮的第i个点击事件

    {

    for(i=0;i<btn.length;i++)//循环去掉button的样式,把div隐藏

     {

       btn[i].className='' //清空按钮的样式

       div2[i].style.display='none'//隐藏div

      }

        this.className='active'//自身添加active

        div2[this.index].style.display='block'//this.index是当前div

    }

   }

}

</script>

登入後複製

希望本文所述對大家的javascript程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
javascript - js addClass 無效
來自於 1970-01-01 08:00:00
0
0
0
php呼叫js並取得js的回傳值問題
來自於 1970-01-01 08:00:00
0
0
0
js進階教程
來自於 1970-01-01 08:00:00
0
0
0
找不到js檔案程式碼
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板