<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0; padding: 0; box-sizing: border-box;}#container{width: 200px; position: relative; }#tab-nav{width: 200px; height: 40px; background: #999;}#tab-nav li{width: 50px; height: 40px; line-height: 40px; border-right: 1px solid #777; float: left; list-style: none; text-align: center; cursor: pointer;}#tab-nav li:last-child{border: none;}#tab-con{width: 200px; height: 200px;}#tab-con li{width: 200px; height: 200px; display: none; text-align: center; line-height: 150px; font-size: 80px; font-weight: 800;border: 1px solid #000;}.active{background: #555; color: orange;}</style></head><body><div id="container"><ul id="tab-nav"><li>1</li><li>2</li><li>3</li><li>4</li></ul><ul id="tab-con"><li style="display: block;">111</li><li>222</li><li>333</li><li>444</li></ul></div><script>function $(id){return typeof id === 'string'?document.getElementById(id):id;}var tabNavLi = $('tab-nav').getElementsByTagName('li');var tabConLi = $('tab-con').getElementsByTagName('li');// alert(tabConLi.length);for(var i=0; i<tabNavLi.length; i++){tabNavLi[i].id = i;tabNavLi[i].onmouseover = function(){for(var j=0; j=tabNavLi.length; j++){// alert(tabNavLi[j].innerHTML);tabNavLi[j].className = '';tabConLi[j].style.display = 'none';}this.className = 'active';tabConLi[this.id].style.display = 'block';}}</script></body></html>
tab選項卡這么寫哪里寫錯了？？？看著課程寫的
lomin
2016-12-12 15:22:25
