各位大哥！幫忙看一下是哪里不對？為什么點擊li沒有響應？多謝??！
各位大哥！幫忙看一下是哪里不對？為什么點擊li沒有響應？多謝??！
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */ ?
? ? ? ? *{margin:0; padding:0; font-size:15px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋體";}
? ? ? ? ul{ list-style-type:none}
? ? ? ??
? ? ? ? .tab{ width:300px; height:190px; margin:20px auto;}?
? ? ? ? .ul1{border-bottom: 2px solid #8B4513;height: 32px;}
? ? ? ? .ul1 li{ display:inline-block; width:60px; line-height:30px; border:1px solid #999; border-bottom:none; text-align:center; margin-left:5px;}
? ? ? ? .ul1 li:hover{ cursor: pointer;}
? ? ? ? .ul1 li.action{ border-top:2px solid #8B4513;border-bottom: 2px solid #FFF;}
?
? ? ? ? .tab div{border: 1px solid #7396B8;border-top: none;}
? ? ? ? .tab div li{height: 30px;line-height: 30px;text-indent: 8px;}
? ? ? ??
? ? ? ? .hide{ display:none;}
? ? ? ? .show{ display: block;}
? ? </style>
? ? <script type="text/javascript">
? ? ? ? ?
? ? // JS實現選項卡切換
? ? window.onload = function() {
? ? ? ? var oli = document.getElementById("ul1");
? ? ? ? var aLi = oli.getElementsByTagName("li");
? ? ? ? var oDiv = document.getElementById("tab");
? ? ? ? var aDiv = oDiv.getElementsByTagName("div");
? ? ? ? for(var i = 0; i < aLi.length; i++) {
? ? ? ? ? ? aLi[i].index = i;
? ? ? ? ? ? aLi[i].onclick = function() {
? ? ? ? ? ? ? ? for(var i = 0; i < aLi.length; i++) {
? ? ? ? ? ? ? ? ? ? aLi[i].className = "";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.className = "action";
? ? ? ? ? ? ? ? for(var j = 0; j < aDiv.length; j++) {
? ? ? ? ? ? ? ? ? ? aDiv[j].className = "hide";
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? aDiv[this.index].className = "show";
? ? ? ? ? ? } ? ? ? ?
? ? ? ? }
? ? }? ??
? ? </script>
</head>
<body>
<!-- HTML頁面布局 -->
<div>
? ? <ul>
? ? ? ? <li>房產</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div>
? ? ? ? <ul>
? ? ? ? ? ? <li>275萬購昌平鄰鐵三居 總價20萬買一居</li>
? ? ? ? ? ? <li>200萬內購五環三居 140萬安家東三環</li>
? ? ? ? ? ? <li>北京首現零首付樓盤 53萬購東5環50平</li>
? ? ? ? ? ? <li>京樓盤直降5000 中信府 公園樓王現房產</li>
? ? ? ? </ul>
? ? </div>
? ? <div>
? ? ? ? <ul>
? ? ? ? ? ? <li>40平出租屋大改造 美少女的混搭小窩</li>
? ? ? ? ? ? <li>經典清新簡歐愛家 90平老房煥發新生 </li>
? ? ? ? ? ? <li>新中式的酷色溫情 66平撞色活潑家居</li>
? ? ? ? ? ? <li>瓷磚就像選好老婆 衛生間煙道的設計</li>
? ? ? ? </ul>
? ? </div>
? ? <div>
? ? ? ? <ul>
? ? ? ? ? ? <li>40平出租屋大改造 美少女的混搭小窩</li>
? ? ? ? ? ? <li>經典清新簡歐愛家 90平老房煥發新生</li>
? ? ? ? ? ? <li>新中式的酷色溫情 66平撞色活潑家居</li>
? ? ? ? ? ? <li>瓷磚就像選好老婆 衛生間煙道的設計</li>
? ? ? ? </ul>
? ? </div>
</div>
</body>
</html>
2015-06-07
document.getElementById("ul1"),沒看見一個id為為“ul1”的啊，那個tab啥的也沒有吧，你給父元素添加個id吧
2015-06-07
你的ul，tab都沒有命名啊，getEementById是用來找id節點的所以你的js不起作用
你可以看看這個簡易選項卡代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active{background: yellow;}
div{border:1px solid red;width: 200px;height: 100px;}
.show{display: block;}
.hide{display: none;}
</style>
<script>
window.onload=function(){
var oInput=document.getElementsByTagName('input');
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<oInput.length;i++){
oInput[i].index=i;
oInput[i].onclick=function(){
for(var i=0;i<oInput.length;i++){
oInput[i].className='';
oDiv[i].className='hide';
this.className='active';
oDiv[this.index].className='show';
}
}
}
}
</script>
</head>
<body>
<input type="button"value="1">
<input type="button" value="2">
<input type="button" value="3">
<div>this is the one content</div>
<div>this is the two content</div>
<div>this is the three content</div>
</body>
</html>