課程
/前端開(kāi)發(fā)
/JavaScript
/JavaScript進(jìn)階篇
不會(huì)呀
2017-07-28
源自:JavaScript進(jìn)階篇 9-7
正在回答
<!--?HTML頁(yè)面布局?--> <div?id="tabs"> ????<ul> ????????<li?class="on">房產(chǎn)</li> ????????<li>家居</li> ????????<li>二手房</li> ????</ul> ????<div> ????????<ul> ????????????<li>275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買(mǎi)一居</li> ????????????<li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)</li> ????????????<li>北京首現(xiàn)零首付樓盤(pán)?53萬(wàn)購(gòu)東5環(huán)50平</li> ????????????<li>京樓盤(pán)直降5000?中信府?公園樓王現(xiàn)房</li> ????????</ul> ????</div> ????<div?class="hide"> ????????<ul> ????????????<li>40平出租屋大改造?美少女的混搭小窩</li> ????????????<li>經(jīng)典清新簡(jiǎn)歐愛(ài)家?90平老房煥發(fā)新生</li> ????????????<li>新中式的酷色溫情?66平撞色活潑家居</li> ????????????<li>瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</li> ????????</ul> ????</div> ????<div?class="hide"> ????????<ul> ????????????<li>通州豪華3居260萬(wàn)?二環(huán)稀缺2居250w甩</li> ????????????<li>西3環(huán)通透2居290萬(wàn)?130萬(wàn)2居限量搶購(gòu)</li> ????????????<li>?黃城根小學(xué)學(xué)區(qū)僅260萬(wàn)?121平70萬(wàn)拋</li> ????????????<li>獨(dú)家別墅280萬(wàn)?蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</li> ????????</ul> ????</div> </div>
/*?CSS樣式制作?*/ *{padding:?0;margin:?0;font-size:?16px;line-height:?30px;font-family:?"Microsoft?YaHei";} ul,li{list-style:?none;} #tabs{width:?310px;height:?160px;margin:?20px;padding:?10px;} #tabs>ul{display:?block;height:?30px;line-height:?30px;border-bottom:2px?saddlebrown?solid;} #tabs>ul>li{float:?left;?display:?inline-block;cursor:?pointer;?width:?60px;height:?28px;line-height:?28px;?border:?1px?solid?#aaa;?border-bottom:?none;margin:?0?3px;?text-align:?center;} #tabs>ul>li.on{border-top:?2px?saddlebrown?solid;border-bottom:?2px?#fff?solid;} #tabs?div{height:?130px;border:?1px?#369?solid;border-top:?none;padding:?10px;} #tabs?div.hide{display:?none;}
//?JS實(shí)現(xiàn)選項(xiàng)卡切換 window.onload?=?function?()?{ ????var?oTab=document.getElementById("tabs"); ????var?oUl=oTab.getElementsByTagName("ul")[0]; ????var?oLis=oUl.getElementsByTagName("li"); ????var?oDivs=oTab.getElementsByTagName("div"); ????for(var?i=?0,len?=?oLis.length;i<len;i++){ ????????oLis[i].index?=?i; ????????oLis[i].onclick?=?function()?{ ????????????for(var?n=?0;n<len;n++){ ????????????????oLis[n].className?=?""; ????????????????oDivs[n].className?=?"hide"; ????????????} ????????????this.className?=?"on"; ????????????oDivs[this.index].className?=?""; ????????} ????}; }
<!DOCTYPE?html> <html> <head?lang="en"> ????<meta?charset="UTF-8"> ????<title>實(shí)踐題?-?選項(xiàng)卡</title> ????<style?type="text/css"> ?/*?CSS樣式制作?*/ ?*{padding:?0;margin:?0;font-size:?16px;line-height:?30px;font-family:?"Microsoft?YaHei";} ?ul,li{list-style:?none;} ?#tabs{width:?310px;height:?160px;margin:?20px;padding:?10px;} ?#tabs>ul{display:?block;height:?30px;line-height:?30px;border-bottom:2px?saddlebrown?solid;} ?#tabs>ul>li{float:?left;?display:?inline-block;cursor:?pointer;?width:?60px;height:?28px;line-height:?28px;?border:?1px?solid?#aaa;?border-bottom:?none;margin:?0?3px;?text-align:?center;} ?#tabs>ul>li.on{border-top:?2px?saddlebrown?solid;border-bottom:?2px?#fff?solid;} ?#tabs?div{height:?130px;border:?1px?#369?solid;border-top:?none;padding:?10px;} ?#tabs?div.hide{display:?none;} ?</style> ????<script?type="text/javascript"> ?//?JS實(shí)現(xiàn)選項(xiàng)卡切換 ?window.onload?=?function?()?{ ?var?oTab=document.getElementById("tabs"); ?var?oUl=oTab.getElementsByTagName("ul")[0]; ?var?oLis=oUl.getElementsByTagName("li"); ?var?oDivs=oTab.getElementsByTagName("div"); ?for(var?i=?0,len?=?oLis.length;i<len;i++){ ?oLis[i].index?=?i; ?oLis[i].onclick?=?function()?{ ?for(var?n=?0;n<len;n++){ ?oLis[n].className?=?""; ?oDivs[n].className?=?"hide"; ????????????????????} ?this.className?=?"on"; ?oDivs[this.index].className?=?""; ????????????????} ????????????}; ????????} ?</script> </head> <body> <!--?HTML頁(yè)面布局?--> <div?id="tabs"> ????<ul> ????????<li?class="on">房產(chǎn)</li> ????????<li>家居</li> ????????<li>二手房</li> ????</ul> ????<div> ????????<ul> ????????????<li>275萬(wàn)購(gòu)昌平鄰鐵三居?總價(jià)20萬(wàn)買(mǎi)一居</li> ????????????<li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居?140萬(wàn)安家東三環(huán)</li> ????????????<li>北京首現(xiàn)零首付樓盤(pán)?53萬(wàn)購(gòu)東5環(huán)50平</li> ????????????<li>京樓盤(pán)直降5000?中信府?公園樓王現(xiàn)房</li> ????????</ul> ????</div> ????<div?class="hide"> ????????<ul> ????????????<li>40平出租屋大改造?美少女的混搭小窩</li> ????????????<li>經(jīng)典清新簡(jiǎn)歐愛(ài)家?90平老房煥發(fā)新生</li> ????????????<li>新中式的酷色溫情?66平撞色活潑家居</li> ????????????<li>瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計(jì)</li> ????????</ul> ????</div> ????<div?class="hide"> ????????<ul> ????????????<li>通州豪華3居260萬(wàn)?二環(huán)稀缺2居250w甩</li> ????????????<li>西3環(huán)通透2居290萬(wàn)?130萬(wàn)2居限量搶購(gòu)</li> ????????????<li>?黃城根小學(xué)學(xué)區(qū)僅260萬(wàn)?121平70萬(wàn)拋</li> ????????????<li>獨(dú)家別墅280萬(wàn)?蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</li> ????????</ul> ????</div> </div> </body> </html>
<!DOCTYPE html><html><head lang="en"> ? ?<meta charset="UTF-8"> ? ?<title>實(shí)踐題 - 選項(xiàng)卡</title> ? ?<style type="text/css"> /* CSS樣式制作 */ *{padding: 0;margin: 0;font-size: 16px;line-height: 30px;font-family: "Microsoft YaHei";} ul,li{list-style: none;} #tabs{width: 310px;height: 160px;margin: 20px;padding: 10px;} #tabs>ul{display: block;height: 30px;line-height: 30px;border-bottom:2px saddlebrown solid;} #tabs>ul>li{float: left; display: inline-block;cursor: pointer; width: 60px;height: 28px;line-height: 28px; border: 1px solid #aaa; border-bottom: none;margin: 0 3px; text-align: center;} #tabs>ul>li.on{border-top: 2px saddlebrown solid;border-bottom: 2px #fff solid;} #tabs div{height: 130px;border: 1px #369 solid;border-top: none;padding: 10px;} #tabs div.hide{display: none;} </style> ? ?<script type="text/javascript"> // JS實(shí)現(xiàn)選項(xiàng)卡切換 window.onload = function () { var oTab=document.getElementById("tabs"); var oUl=oTab.getElementsByTagName("ul")[0]; var oLis=oUl.getElementsByTagName("li"); var oDivs=oTab.getElementsByTagName("div"); for(var i= 0,len = oLis.length;i<len;i++){ oLis[i].index = i; oLis[i].onclick = function() { for(var n= 0;n<len;n++){ oLis[n].className = ""; oDivs[n].className = "hide"; ? ? ? ? ? ? ? ? ? ?} this.className = "on"; oDivs[this.index].className = ""; ? ? ? ? ? ? ? ?} ? ? ? ? ? ?}; ? ? ? ?} </script></head><body><!-- HTML頁(yè)面布局 --><div id="tabs"> ? ?<ul> ? ? ? ?<li class="on">房產(chǎn)</li> ? ? ? ?<li>家居</li> ? ? ? ?<li>二手房</li> ? ?</ul> ? ?<div> ? ? ? ?<ul> ? ? ? ? ? ?<li>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居</li> ? ? ? ? ? ?<li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li> ? ? ? ? ? ?<li>北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</li> ? ? ? ? ? ?<li>京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房</li> ? ? ? ?</ul> ? ?</div> ? ?<div class="hide"> ? ? ? ?<ul> ? ? ? ? ? ?<li>40平出租屋大改造 美少女的混搭小窩</li> ? ? ? ? ? ?<li>經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</li> ? ? ? ? ? ?<li>新中式的酷色溫情 66平撞色活潑家居</li> ? ? ? ? ? ?<li>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</li> ? ? ? ?</ul> ? ?</div> ? ?<div class="hide"> ? ? ? ?<ul> ? ? ? ? ? ?<li>通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</li> ? ? ? ? ? ?<li>西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</li> ? ? ? ? ? ?<li> 黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋</li> ? ? ? ? ? ?<li>獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</li> ? ? ? ?</ul> ? ?</div></div></body></html>
舉報(bào)
本課程從如何插入JS代碼開(kāi)始,帶您進(jìn)入網(wǎng)頁(yè)動(dòng)態(tài)交互世界
4 回答給大家分享一下答案
3 回答剛寫(xiě)完分享下答案
1 回答本節(jié)答案分享
4 回答分享答案,嘻嘻
2 回答分享答案,歡迎交流。
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢(xún)優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2017-07-28
2017-07-28
2017-07-28
2017-07-28
2017-07-28
<!DOCTYPE html>
<html>
<head lang="en">
? ?<meta charset="UTF-8">
? ?<title>實(shí)踐題 - 選項(xiàng)卡</title>
? ?<style type="text/css">
/* CSS樣式制作 */
*{padding: 0;margin: 0;font-size: 16px;line-height: 30px;font-family: "Microsoft YaHei";}
ul,li{list-style: none;}
#tabs{width: 310px;height: 160px;margin: 20px;padding: 10px;}
#tabs>ul{display: block;height: 30px;line-height: 30px;border-bottom:2px saddlebrown solid;}
#tabs>ul>li{float: left; display: inline-block;cursor: pointer; width: 60px;height: 28px;line-height: 28px; border: 1px solid #aaa; border-bottom: none;margin: 0 3px; text-align: center;}
#tabs>ul>li.on{border-top: 2px saddlebrown solid;border-bottom: 2px #fff solid;}
#tabs div{height: 130px;border: 1px #369 solid;border-top: none;padding: 10px;}
#tabs div.hide{display: none;}
</style>
? ?<script type="text/javascript">
// JS實(shí)現(xiàn)選項(xiàng)卡切換
window.onload = function () {
var oTab=document.getElementById("tabs");
var oUl=oTab.getElementsByTagName("ul")[0];
var oLis=oUl.getElementsByTagName("li");
var oDivs=oTab.getElementsByTagName("div");
for(var i= 0,len = oLis.length;i<len;i++){
oLis[i].index = i;
oLis[i].onclick = function() {
for(var n= 0;n<len;n++){
oLis[n].className = "";
oDivs[n].className = "hide";
? ? ? ? ? ? ? ? ? ?}
this.className = "on";
oDivs[this.index].className = "";
? ? ? ? ? ? ? ?}
? ? ? ? ? ?};
? ? ? ?}
</script>
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div id="tabs">
? ?<ul>
? ? ? ?<li class="on">房產(chǎn)</li>
? ? ? ?<li>家居</li>
? ? ? ?<li>二手房</li>
? ?</ul>
? ?<div>
? ? ? ?<ul>
? ? ? ? ? ?<li>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買(mǎi)一居</li>
? ? ? ? ? ?<li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li>
? ? ? ? ? ?<li>北京首現(xiàn)零首付樓盤(pán) 53萬(wàn)購(gòu)東5環(huán)50平</li>
? ? ? ? ? ?<li>京樓盤(pán)直降5000 中信府 公園樓王現(xiàn)房</li>
? ? ? ?</ul>
? ?</div>
? ?<div class="hide">
? ? ? ?<ul>
? ? ? ? ? ?<li>40平出租屋大改造 美少女的混搭小窩</li>
? ? ? ? ? ?<li>經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</li>
? ? ? ? ? ?<li>新中式的酷色溫情 66平撞色活潑家居</li>
? ? ? ? ? ?<li>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</li>
? ? ? ?</ul>
? ?</div>
? ?<div class="hide">
? ? ? ?<ul>
? ? ? ? ? ?<li>通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</li>
? ? ? ? ? ?<li>西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</li>
? ? ? ? ? ?<li> 黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋</li>
? ? ? ? ? ?<li>獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</li>
? ? ? ?</ul>
? ?</div>
</div>
</body>
</html>