欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2015年02月09日 09:14:11   作者：peerless  
這篇文章主要介紹了js選項(xiàng)卡的實(shí)現(xiàn)方法,實(shí)例分析了js選項(xiàng)卡的實(shí)現(xiàn)思路及html+css布局與js功能技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js選項(xiàng)卡的實(shí)現(xiàn)方法。分享給大家供大家參考。具體分析如下：

一、思路

1. 獲取元素；

2. for循環(huán)按鈕元素添加onclick(點(diǎn)擊) 或者 onmousemove(移入)事件；

3. 點(diǎn)擊當(dāng)前按鈕時(shí)會(huì)以高亮狀態(tài)顯示，通過(guò)for循環(huán)歷遍把所有的按鈕樣式設(shè)置為空在把所有div的display設(shè)置為none。

4. 點(diǎn)擊當(dāng)前按鈕添加樣式，把當(dāng)前div顯示出來(lái)，display設(shè)置為block。

二、html代碼：

<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部分：

.active
{
background:#9CC;
}
.div2
{
width:300px;
height:200px; 
border:1px #666666 solid;
display:none;
}

四、js代碼：

<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++)//循環(huán)每個(gè)按鈕
   { 
     btn[i].index=i 
//btn[i]是指定button的第i個(gè)按鈕;為該按鈕添加一個(gè)index屬性，并將index的值設(shè)置為i
     btn[i].onclick=function()//按鈕的第i個(gè)點(diǎn)擊事件
    {
    for(i=0;i<btn.length;i++)//循環(huán)去掉button的樣式，把div隱藏
     { 
       btn[i].className='' //清空按鈕的樣式
       div2[i].style.display='none'//隱藏div
      }
        this.className='active'//自身添加active
        div2[this.index].style.display='block'//this.index是當(dāng)前div 
    }
   }
}
</script>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論