tab選項卡切換效果(一)——滑過切換和點擊切換

JS代碼如下:

<script>
   function tabMove(){
       //獲取鼠標滑過或點擊的標籤和要切換的內容分類元素
       var divId01=document.getElementById('notice_tit');
       var titles=divId01.getElementsByTagName('li');
       var divId02=document.getElementById('notice_con');
       var divs=divId02.getElementsByTagName('div');
       //檢查是否對應
       if (titles.length!=divs.length) return;
       //遍歷titles下所有的li
       for (var i=0;i<titles.length;i++){
           titles[i].id=i;
           titles[i].onmouseover=function(){          //onmouseover鼠標滑過切換,onclick鼠標點擊切換
               //清除所有li上的class
               for (var j=0;j<titles.length;j++){
                   titles[j].className='';
                   divs[j].style.display='none';
               }
               //設置當前爲高亮顯示
               this.className='select';             //select爲高亮顯示設置的CSS樣式
               divs[this.id].style.display='block';
           }
       }
   }
   window.onload=tabMove;
</script>


發佈了39 篇原創文章 · 獲贊 7 · 訪問量 13萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章