                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

9.7分享一下答案

不會呀

qq_楓橋夜泊_2

2017-07-28

源自：JavaScript進階篇 9-7

關注問題我要回答

1254

操作

收起

5 回答

mango
2017-07-28

<!--?HTML頁面布局?-->
<div?id="tabs">
????<ul>
????????<li?class="on">房產</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????????<ul>
????????????<li>275萬購昌平鄰鐵三居?總價20萬買一居</li>
????????????<li>200萬內購五環三居?140萬安家東三環</li>
????????????<li>北京首現零首付樓盤?53萬購東5環50平</li>
????????????<li>京樓盤直降5000?中信府?公園樓王現房</li>
????????</ul>
????</div>
????<div?class="hide">
????????<ul>
????????????<li>40平出租屋大改造?美少女的混搭小窩</li>
????????????<li>經典清新簡歐愛家?90平老房煥發新生</li>
????????????<li>新中式的酷色溫情?66平撞色活潑家居</li>
????????????<li>瓷磚就像選好老婆?衛生間煙道的設計</li>
????????</ul>
????</div>
????<div?class="hide">
????????<ul>
????????????<li>通州豪華3居260萬?二環稀缺2居250w甩</li>
????????????<li>西3環通透2居290萬?130萬2居限量搶購</li>
????????????<li>?黃城根小學學區僅260萬?121平70萬拋</li>
????????????<li>獨家別墅280萬?蘇州橋2居優惠價248萬</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實現選項卡切換
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?=?"";
????????}
????};
}

0 回復有任何疑惑可以回復我~

收起回答

mango
2017-07-28

/*?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;}

/*?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;}

<!--?HTML頁面布局?-->
<div?id="tabs">
????<ul>
????????<li?class="on">房產</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????????<ul>
????????????<li>275萬購昌平鄰鐵三居?總價20萬買一居</li>
????????????<li>200萬內購五環三居?140萬安家東三環</li>
????????????<li>北京首現零首付樓盤?53萬購東5環50平</li>
????????????<li>京樓盤直降5000?中信府?公園樓王現房</li>
????????</ul>
????</div>
????<div?class="hide">
????????<ul>
????????????<li>40平出租屋大改造?美少女的混搭小窩</li>
????????????<li>經典清新簡歐愛家?90平老房煥發新生</li>
????????????<li>新中式的酷色溫情?66平撞色活潑家居</li>
????????????<li>瓷磚就像選好老婆?衛生間煙道的設計</li>
????????</ul>
????</div>
????<div?class="hide">
????????<ul>
????????????<li>通州豪華3居260萬?二環稀缺2居250w甩</li>
????????????<li>西3環通透2居290萬?130萬2居限量搶購</li>
????????????<li>?黃城根小學學區僅260萬?121平70萬拋</li>
????????????<li>獨家別墅280萬?蘇州橋2居優惠價248萬</li>
????????</ul>
????</div>
</div>

0 回復有任何疑惑可以回復我~

收起回答

mango
2017-07-28

<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</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實現選項卡切換
?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頁面布局?-->
<div?id="tabs">
????<ul>
????????<li?class="on">房產</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????????<ul>
????????????<li>275萬購昌平鄰鐵三居?總價20萬買一居</li>
????????????<li>200萬內購五環三居?140萬安家東三環</li>
????????????<li>北京首現零首付樓盤?53萬購東5環50平</li>
????????????<li>京樓盤直降5000?中信府?公園樓王現房</li>
????????</ul>
????</div>
????<div?class="hide">
????????<ul>
????????????<li>40平出租屋大改造?美少女的混搭小窩</li>
????????????<li>經典清新簡歐愛家?90平老房煥發新生</li>
????????????<li>新中式的酷色溫情?66平撞色活潑家居</li>
????????????<li>瓷磚就像選好老婆?衛生間煙道的設計</li>
????????</ul>
????</div>
????<div?class="hide">
????????<ul>
????????????<li>通州豪華3居260萬?二環稀缺2居250w甩</li>
????????????<li>西3環通透2居290萬?130萬2居限量搶購</li>
????????????<li>?黃城根小學學區僅260萬?121平70萬拋</li>
????????????<li>獨家別墅280萬?蘇州橋2居優惠價248萬</li>
????????</ul>
????</div>
</div>
</body>
</html>

0 回復有任何疑惑可以回復我~

收起回答

mango
2017-07-28

<!DOCTYPE?html>
<html>
<head?lang="en">
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</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實現選項卡切換
?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頁面布局?-->
<div?id="tabs">
????<ul>
????????<li?class="on">房產</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>
????????<ul>
????????????<li>275萬購昌平鄰鐵三居?總價20萬買一居</li>
????????????<li>200萬內購五環三居?140萬安家東三環</li>
????????????<li>北京首現零首付樓盤?53萬購東5環50平</li>
????????????<li>京樓盤直降5000?中信府?公園樓王現房</li>
????????</ul>
????</div>
????<div?class="hide">
????????<ul>
????????????<li>40平出租屋大改造?美少女的混搭小窩</li>
????????????<li>經典清新簡歐愛家?90平老房煥發新生</li>
????????????<li>新中式的酷色溫情?66平撞色活潑家居</li>
????????????<li>瓷磚就像選好老婆?衛生間煙道的設計</li>
????????</ul>
????</div>
????<div?class="hide">
????????<ul>
????????????<li>通州豪華3居260萬?二環稀缺2居250w甩</li>
????????????<li>西3環通透2居290萬?130萬2居限量搶購</li>
????????????<li>?黃城根小學學區僅260萬?121平70萬拋</li>
????????????<li>獨家別墅280萬?蘇州橋2居優惠價248萬</li>
????????</ul>
????</div>
</div>
</body>
</html>

0 回復有任何疑惑可以回復我~

收起回答

mango
2017-07-28

<!DOCTYPE html>
<html>
<head lang="en">
? ?<meta charset="UTF-8">
? ?<title>實踐題 - 選項卡</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實現選項卡切換
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>

<div id="tabs">
? ?<ul>
? ? ? ?<li class="on">房產</li>
? ? ? ?<li>家居</li>
? ? ? ?<li>二手房</li>
? ?</ul>
? ?<div>
? ? ? ?<ul>
? ? ? ? ? ?<li>275萬購昌平鄰鐵三居總價20萬買一居</li>
? ? ? ? ? ?<li>200萬內購五環三居 140萬安家東三環</li>
? ? ? ? ? ?<li>北京首現零首付樓盤 53萬購東5環50平</li>
? ? ? ? ? ?<li>京樓盤直降5000 中信府公園樓王現房</li>
? ? ? ?</ul>
? ?</div>
? ?<div class="hide">
? ? ? ?<ul>
? ? ? ? ? ?<li>40平出租屋大改造美少女的混搭小窩</li>
? ? ? ? ? ?<li>經典清新簡歐愛家 90平老房煥發新生</li>
? ? ? ? ? ?<li>新中式的酷色溫情 66平撞色活潑家居</li>
? ? ? ? ? ?<li>瓷磚就像選好老婆衛生間煙道的設計</li>
? ? ? ?</ul>
? ?</div>
? ?<div class="hide">
? ? ? ?<ul>
? ? ? ? ? ?<li>通州豪華3居260萬二環稀缺2居250w甩</li>
? ? ? ? ? ?<li>西3環通透2居290萬 130萬2居限量搶購</li>
? ? ? ? ? ?<li> 黃城根小學學區僅260萬 121平70萬拋</li>
? ? ? ? ? ?<li>獨家別墅280萬蘇州橋2居優惠價248萬</li>
? ? ? ?</ul>
? ?</div>
</div>
</body>
</html>