我終于完成了！ 參考代碼！
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? *{
? ? ? ? margin:0;padding:0;
? ? }? ?
? ? .div1{
? ? ? ? height:400px; width:400px; border:1px solid #ccc;
? ? }
? ? li{height:40px; width:60px;display:inline-block; border:1px solid #ccc; text-align:center; line-height:40px; margin:5px 2px 0 25px;}
? ? .div2{
? ? ? ? width:350px; height:300px;border:1px solid blue;margin:0 15px;
? ? ? ? box-sizing: border-box;border-top:2px solid brown; line-height:1.9;
? ? }
? ? </style>
<script type="text/javascript">? ? // JS實現選項卡切換
var int = 0;
var lis = document.getElementsByTagName("li");
var datas = [
? ? {
'div2': '275萬購昌平鄰鐵三居 總價20萬買一居<br>200萬內購五環(huán)三居140萬安家東三環(huán)<br>北京首現零首付樓盤 53萬購東5環(huán)50平<br>京樓盤直降5000 中信府 公園樓王現房'
},
{
'div2':'40平出租屋大改造 美少女的混搭小窩<br>經典清新簡歐愛家 90平老房煥發(fā)新生<br>新中式的酷色溫情 66平撞色活潑家居<br>瓷磚就像選好老婆 衛(wèi)生間煙道的設計'? ??
},
{
'div2': '通州豪華3居260萬 二環(huán)稀缺2居250w甩<br>西3環(huán)通透2居290萬 130萬2居限量搶購<br>黃城根小學學區(qū)僅260萬 121平70萬拋!<br>獨家別墅280萬 蘇州橋2居優(yōu)惠價248萬'
}
];
window.onload = function(){
? ? for(var i = 0;i<lis.length;i++){
? ? ? ? lis[i].setAttribute("onclick","change(" + i + ")");
? ? }
? ? change(int);
}
function change(index){
? ? int = index;
? ? settext();
? ? for(var i = 0; i<lis.length;i++){
? ? ? ? if(int == i){
? ? ? ? ? ? lis[i].style["border-top"] = "2px solid red";
? ? ? ? ? ? lis[i].style["border-bottom"] = "2px solid #fff";
? ? ? ? }else{
? ? ? ? ? ? lis[i].style["border-top"] = "2px solid #ccc";
? ? ? ? ? ? lis[i].style["border-bottom"] = "2px solid #fff";
? ? ? ? }
? ? }
}
function settext(){
? ? var div2 = document.getElementById("div2");
? ? div2.innerHTML = datas[int].div2;
}
</script>
?
</head>
<body>
<!-- HTML頁面布局 -->
<div class = "div1" id = "div1">
? ? <ul>
? ? ? ? <li>房產</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div class = "div2" id = "div2"></div>
</div>
?
</body>
</html>
2020-07-31
不錯不錯