大佬們看看我這問題在哪
最后執行的好怪呀
qq_慕慕3085076
2019-06-05
1 回答
舉報
0/150
提交
取消
最后執行的好怪呀
2019-06-05
舉報
2019-06-26
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實踐題 - 選項卡</title>
<style type="text/css">
/* CSS樣式制作 */ ?
*{margin:0;padding:0;}
ul{list-style: none;}
.box{position: relative;}
.box li{
position:absolute;
top:-33px;
border:1px solid #ccc;
float: left;
padding:5px 20px 5px 20px;
margin:1px 3px 0;
background-color:white;
border-bottom:2px solid brown;
z-index: -1;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.box li:hover{
cursor:pointer
}
.box .tit1{left:0;}
.box .tit2{left:80px;}
.box .tit3{left:160px;}
.context{
width:330px;
clear:both;
padding:5px 0 40px 5px;
border:1px solid blue;
border-top:2px solid brown;
margin-top:33px;
}
.context ul{
display: none;
}
.context ul li{
font-size: 14px;
line-height: 25px;
}
#activated{
display: block;
}
#act{
height:22px;
border-top:2px solid brown;
border-bottom:none;
z-index: 2;
}
</style>
<script type="text/javascript">
var page = 1,
box = null,
context = null;
// JS實現選項卡切換
window.onload = function(){
box = document.getElementsByClassName("box")[0]
context = document.getElementsByClassName("context")[0]
}
function change(i){
context.childNodes[page].setAttribute('id',' ');
context.childNodes[i].setAttribute('id','activated');
box.childNodes[page].setAttribute('id',' ');
box.childNodes[i].setAttribute('id','act');
page = i
}
</script>
</head>
<body>
<!-- HTML頁面布局 -->
<ul class="box">
<li class="tit1" id="act" onclick="change(1)">房產</li>
<li class="tit2" onclick="change(3)">家居</li>
<li class="tit3" onclick="change(5)">二手房</li>
</ul>
<div class="context">
<ul id="activated">
<li>275萬購昌平鄰鐵三居 總價20萬買一居</li>
<li>200萬內購五環三居 140萬安家東三環</li>
<li>北京首現零首付樓盤 53萬購東5環50平</li>
<li>京樓盤直降5000 中信府 公園樓王現房</li>
</ul>
<ul >
<li>40平出租屋大改造 美少女的混搭小窩</li>
<li>經典清新簡歐愛家 90平老房煥發新生</li>
<li>新中式的酷色溫情 66平撞色活潑家居</li>
<li>瓷磚就像選好老婆 衛生間煙道的設計</li>
</ul>
<ul >
<li>通州豪華3居260萬 二環稀缺2居250w甩</li>
<li>西3環通透2居290萬 130萬2居限量搶購</li>
<li>黃城根小學學區僅260萬 121平70萬拋!</li>
<li>獨家別墅280萬 蘇州橋2居優惠價248萬</li>
</ul>
</div>
</body>
</html>
我是這么寫的…感覺我寫的好多沒用的…