我終于完成了！ 參考代碼！
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實(shí)踐題 - 選項(xiàng)卡</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實(shí)現(xiàn)選項(xiàng)卡切換
var int = 0;
var lis = document.getElementsByTagName("li");
var datas = [
? ? {
'div2': '275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居<br>200萬(wàn)內(nèi)購(gòu)五環(huán)三居140萬(wàn)安家東三環(huán)<br>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平<br>京樓盤直降5000 中信府 公園樓王現(xiàn)房'
},
{
'div2':'40平出租屋大改造 美少女的混搭小窩<br>經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生<br>新中式的酷色溫情 66平撞色活潑家居<br>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)'? ??
},
{
'div2': '通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩<br>西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)<br>黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!<br>獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)'
}
];
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頁(yè)面布局 -->
<div class = "div1" id = "div1">
? ? <ul>
? ? ? ? <li>房產(chǎn)</li>
? ? ? ? <li>家居</li>
? ? ? ? <li>二手房</li>
? ? </ul>
? ? <div class = "div2" id = "div2"></div>
</div>
?
</body>
</html>
2020-07-31
不錯(cuò)不錯(cuò)