供大家參考，歡迎大佬挑刺
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>選項(xiàng)卡效果</title>
</head>
<style>
????*?{
????????padding:?0;
????????margin:?0;
????????font:?12px?normal?"microsoft?yahei";
????}
????#tabs?{
????????width:?290px;
????????padding:?5px;
????????height:?150px;
????????margin:?20px;
????}
????#tabs?ul?{
????????list-style:?none;
????????display:?block;
????????/*此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。*/
????????height:?30px;
????????line-height:?30px;
????????border-bottom:?2px?saddlebrown?solid;
????}
????#tabs?ul?li?{
????????background:?#fff;
????????cursor:?pointer;
????????/*光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）*/
????????float:?left;
????????????/*左浮動(dòng)*/
??????
????????list-style:?none;
????????height:?29px;
????????line-height:?29px;
????????margin:?0?15px;
????????border:?1px?solid?#aaa;
????????border-bottom:?none;
????????display:?inline-block;
????????/*行內(nèi)塊元素*/
????????width:?60px;
????????text-align:?center;
????}
????#tabs?ul?li.on?{
????????border-top:?2px?solid?saddlebrown;
????????border-bottom:?2px?solid?#fff;
????????border-radius:?3px;
????????border-left:?2px?solid?saddlebrown;
????????border-right:?2px?solid?saddlebrown;
????????color:?saddlebrown;
????}
????#tabs?div?{
????????height:?120px;
????????line-height:?25px;
????????border:?1px?solid?#336699;
????????border-top:?none;
????????padding:?5px;
????}
????.hide?{
????????display:?none;
????}
</style>
<body>
????<div?id="tabs">
????????<ul>
????????????<li?class="on">房產(chǎn)</li>
????????????<li>家居</li>
????????????<li>二手房</li>
????????</ul>
????????<div?class="">
????????????275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買一居
????????????200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)
????????????北京首現(xiàn)零首付樓盤?53萬(wàn)購(gòu)東5環(huán)50平
????????????京樓盤直降5000?中信府?公園樓王現(xiàn)房
????????</div>
????????<div?class="hide">
????????????40平出租屋大改造?美少女的混搭小窩
????????????經(jīng)典清新簡(jiǎn)歐愛(ài)家?90平老房煥發(fā)新生
????????????新中式的酷色溫情?66平撞色活潑家居
????????????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)
????????</div>
????????<div?class="hide">
????????????通州豪華3居260萬(wàn)?二環(huán)稀缺2居250w甩
????????????西3環(huán)通透2居290萬(wàn)?130萬(wàn)2居限量搶購(gòu)
????????????黃城根小學(xué)學(xué)區(qū)僅260萬(wàn)?121平70萬(wàn)拋!
????????????獨(dú)家別墅280萬(wàn)?蘇州橋2居優(yōu)惠價(jià)248萬(wàn)
????????</div>
????</div>
</body>
<script?type="text/javascript">
????window.onload?=?function?()?{
????????//?var?oTab?=?document.getElementById("tabs");
????????//?var?oUL?=?document.getElementsByTagName("ul")[0];
????????var?oLis?=?document.getElementsByTagName("li");
????????var?oDIV?=?document.getElementsByTagName("div");
????????for?(var?i?=?0;?i?<?oLis.length;?i++)?{
????????????//點(diǎn)擊選項(xiàng)卡改變樣式，切換div內(nèi)容
????????????oLis[i].index?=?i;
????????????oLis[i].onclick?=?function?()?{
????????????????for?(var?n?=?0;?n?<?oLis.length;?n++)?{
????????????????????oLis[n].className?=?"";
????????????????????oDIV[n+1].className="hide";
????????????????}
????????????????????this.className?=?"on";
????????????????????//?oDIV[this.index+1].className="";
????????????????????console.log(oDIV[this.index+1].className);
????????????????????oDIV[this.index+1].removeAttribute("class");
????????????}
????????}
????}
</script>
</html>
2020-04-13
script放在body或者h(yuǎn)ead里面
2020-02-29
好的！
2020-02-15
javacript和css代碼可放在“head”標(biāo)簽中。