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