為什么點(diǎn)擊沒(méi)效果
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實(shí)踐題 - 選項(xiàng)卡</title>
? ? <style type="text/css">
? ??
? ? ?*{
? ? ? margin:0px;padding: 0px;font: red;
? ? ?}
? ? ?ul{
? ? ? list-style-type: none;
? ? ?}
? ? ?#tab-list{
? ? ? ?width:280px;height: 130px;color: red;margin: 20px auto;
? ? ? }
? ? ? .ul1{
? ? ? ?border-bottom: 2px solid #8B4513;height: 30px;
? ? ? }
? ? ? .ul1 li{
? ? ? ?display:inline-block ;width: 70px;line-height: 30px;text-align: center;
? ? ? ?border: 1px solid black; border-bottom:none;margin-left: 5px;
? ? ? }
? ? ? .ul1 li:hover{cursor: pointer;}
? ? ? .ul1 .li1{
? ? ? ?border-top:1px solid #8B4513;border-bottom: 2px solid #ffffff;
? ? ? }
? ? ? #tab-list div{
? ? ? ?border: 1px solid blue;border-top: none;
? ? ? }
? ? ? #tab-list div li{
? ? ? ?height: 30px;line-height: 30px;text-indent: 5px;
? ? ? }
? ? ? .kuang{
? ? ? ?display: none;
? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ?
? ? ?window.onload=function(){
? ? ? ? var oTab = document.getElementById("tab-list")
? ? ? ? var li = oTab.getElementsByTagName("li");
? ? ? ? var div = oTab.getElementsByTagName("div");//oTabs.get...是為了定義className作用對(duì)象為id為tabs下的所有文本div
? ? ? ??
? ? ? ? for(var i=0;i<li.length;i++){//獲取所有i編號(hào)的元素
? ? ? ? ? ? li[i].index = i; ?//定義一個(gè)index屬性對(duì)li進(jìn)行編號(hào)
? ? ? ? ? ? li[i].onclick = function(){//再注冊(cè)一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊的時(shí)候所有標(biāo)簽都恢復(fù)最初狀態(tài)
? ? ? ? ? ? for(var n=0;n<li.length;n++){//這步是相對(duì)于未被點(diǎn)擊部分的樣式
? ? ? ? ? ? ? ? li[n].className = "";
? ? ? ? ? ? ? ? div[n].className = "kuang";
? ? ? ? ? ? }
? ? ? ? ? ? this.className = "li1";//再對(duì)點(diǎn)擊事件添加相應(yīng)的屬性
? ? ? ? ? ? div[this.index].className = "";//通過(guò)之前的index編號(hào)綁定的指定div
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? ?
? ? </script>
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div id="tab-list">
<ul>
<li>房產(chǎn)</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
<ul>
<li>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</li>
? ? <li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li>
? ? <li>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</li>
? ? <li>京樓盤直降5000 中信府 公園樓王現(xiàn)房</li>
</ul>
</div>
<div>
<ul>
<li>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</li>
? ? <li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li>
? ? <li>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</li>
? ? <li>京樓盤直降5000 中信府 公園樓王現(xiàn)房</li>
</ul>
</div>
<div>
<ul>
<li>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</li>
? ? <li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li>
? ? <li>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</li>
? ? <li>京樓盤直降5000 中信府 公園樓王現(xiàn)房</li>
</ul>
</div>
</div>
</body>
</html>
2017-09-11
沒(méi)有提前定義