js學習總結----經典小案例之選項卡
阿新 • • 發佈:2017-06-20
scrip ges div 視頻內容 mil line 學習總結 images ul li
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,ul,li{ margin:0; padding: 0; font-family: Arial; font-size:12px; } ul li{ list-style:none; } #tab{ margin:10px auto 0; width:500px; } #tab ul{ position: relative; top:1px; } #tab li{ float:left; width:100px; height:30px; line-height: 30px; text-align:center; border:1px solid #ddd; margin-right:10px; cursor:pointer; } #tab li.select{ border-bottom:none; background:-webkit-linear-gradient(top left,#cc0000,#00b3ee,#ffff00); } #tab div{ display:none; clear:both; height:100px; line-height:100px; text-align:center; border:1px solid #ddd; } #tab div.select{ display:block; } </style> </head> <body> <div id=‘tab‘> <ul> <li class=‘select‘>視頻</li> <li>綜藝</li> <li>秒拍</li> </ul> <div class=‘select‘>視頻內容</div> <div>綜藝內容</div> <div>秒拍內容</div> </div> <script type=‘text/javascript‘> /* 選項卡的思路: 1、鼠標滑到某一個li上面,先讓所有的li和div都沒有select樣式,再讓當前的有這個select樣式 2、要操作誰就先獲取誰 3、制定一個功能方法,實現我們的需求 4、給我們的li綁定鼠標移上去的事件 */ var oTab = document.getElementById(‘tab‘); var oLis = oTab.getElementsByTagName(‘li‘); var oDivs = oTab.getElementsByTagName(‘div‘) //nIndex是我們定義的形參,代表當前被選中的元素的索引 function tabChange(nIndex){ for(var i = 0;i<oLis.length;i++){ oLis[i].className = ""; oDivs[i].className = ""; } oLis[nIndex].className = "select"; oDivs[nIndex].className = "select"; } //js加載完成後(for循環也完成),我們才會手動觸發onmouseover事件 ,這裏有一個閉包的問題 for(var i = 0;i<oLis.length;i++){ oLis[i].index = i//在每一個循環的時候,把每一個li 的索引定義在自己的自定義屬性index上 oLis[i].onmouseover = function(){ tabChange(this.index) } } </script> </body> </html>
簡化版本:
js學習總結----經典小案例之選項卡