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>