4行JS代碼實現選項卡，帶注釋詳解
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>實踐題 - 選項卡</title>
? ? <style type="text/css">
? ? ?/* CSS樣式制作 */??
? ? ? .hover{background-color: red;color: #fff;
? .disn{display: none;}
? ? </style>
? ? <script type="text/javascript">
? ? // JS實現選項卡切換
? ? function setTab(name,num,n){
? ? ?// name? 幫參數 li，con 獲取對應元素ID的工具人參數。
? ? ?// num，各選項卡的ID號，通過for循環中參數 i 是否等于num觸發改hover類名和改display屬性
? ? ?// n 總選項卡個數，限定for循環范圍。
? ? ?for(var i=1;i<=n;i++){
? ? ?var li =document.getElementById(name+i);
? ? ?// 定義參數 li 獲取選項卡nav的ID
? ? ?var con=document.getElementById('con_'+name+'_'+i);
? ? ?// 定義參數 con 獲取選項卡內容的ID
? ? ?li.className=i==num?"hover":"";
? ? ?// i是否等于函數setTab第二參數num？如果是就賦li(選項卡nav)的類名為hover，否則為空
? ? ?con.style.display=i==num?"block":"none";
? ? ?// i是否等于函數setTab第二參數num？如果是就賦con的display屬性為block，否則為none
? ? ?}
? ? ?// 循環過程，選項卡1和2
? ? ?// 鼠標經過2，num參數為2，for循環1的時候，給1的nav一個空類名，且選項卡內容display:none，循環到2的時候，給display:block
? ? ?}
? ? </script>
</head>
<body>
<!-- HTML頁面布局 -->
<div class="hd">
? ? <span class="hover" id="one1" onmouseover="setTab('one',1,3)">房產</span>
? ? <span id="one2" onmouseover="setTab('one',2,3)">家居</span>
? ? <span id="one3" onmouseover="setTab('one',3,3)">二手房</span>
</div>
?<div class="bd">
? ? ?<div class="list" id="con_one_1">
? ? ? ? <p>275萬購昌平鄰鐵三居 總價20萬買一居</p>
? ? ? ? <p>200萬內購五環三居 140萬安家東三環</p>
? ? ? ? <p>北京首現零首付樓盤 53萬購東5環50平</p>
? ? ? ? <p>京樓盤直降5000 中信府 公園樓王現房</p>
? ? ?</div>
? ? ?<div class="list disn" id="con_one_2">
? ? ? ? <p>40平出租屋大改造 美少女的混搭小窩</p>
? ? ? ? <p>經典清新簡歐愛家 90平老房煥發新生</p>
? ? ? ? <p>新中式的酷色溫情 66平撞色活潑家居</p>
? ? ? ? <p>瓷磚就像選好老婆 衛生間煙道的設計</p>
? ? ?</div>
? ? ?<div class="list disn" id="con_one_3">
? ? ? ? <p>通州豪華3居260萬 二環稀缺2居250w甩</p>
? ? ? ? <p>西3環通透2居290萬 130萬2居限量搶購</p>
? ? ? ? <p>黃城根小學學區僅260萬 121平70萬拋!</p>
? ? ? ? <p>獨家別墅280萬 蘇州橋2居優惠價248萬</p>
? ? ?</div>
?</div>
</body>
</html>
