供大家參考，歡迎大佬挑刺
<!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>選項卡效果</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;
????????/*此元素將顯示為塊級元素，此元素前后會帶有換行符。*/
????????height:?30px;
????????line-height:?30px;
????????border-bottom:?2px?saddlebrown?solid;
????}
????#tabs?ul?li?{
????????background:?#fff;
????????cursor:?pointer;
????????/*光標呈現為指示鏈接的指針（一只手）*/
????????float:?left;
????????????/*左浮動*/
??????
????????list-style:?none;
????????height:?29px;
????????line-height:?29px;
????????margin:?0?15px;
????????border:?1px?solid?#aaa;
????????border-bottom:?none;
????????display:?inline-block;
????????/*行內塊元素*/
????????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">房產</li>
????????????<li>家居</li>
????????????<li>二手房</li>
????????</ul>
????????<div?class="">
????????????275萬購昌平鄰鐵三居?總價20萬買一居
????????????200萬內購五環三居?140萬安家東三環
????????????北京首現零首付樓盤?53萬購東5環50平
????????????京樓盤直降5000?中信府?公園樓王現房
????????</div>
????????<div?class="hide">
????????????40平出租屋大改造?美少女的混搭小窩
????????????經典清新簡歐愛家?90平老房煥發新生
????????????新中式的酷色溫情?66平撞色活潑家居
????????????瓷磚就像選好老婆?衛生間煙道的設計
????????</div>
????????<div?class="hide">
????????????通州豪華3居260萬?二環稀缺2居250w甩
????????????西3環通透2居290萬?130萬2居限量搶購
????????????黃城根小學學區僅260萬?121平70萬拋!
????????????獨家別墅280萬?蘇州橋2居優惠價248萬
????????</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++)?{
????????????//點擊選項卡改變樣式，切換div內容
????????????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或者head里面
2020-02-29
好的！
2020-02-15
javacript和css代碼可放在“head”標簽中。