慕课编程题JS选项卡切换
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了慕课编程题JS选项卡切换相关的知识，希望对你有一定的参考价值。
javascript进阶篇的最后一节是一个选项卡切换的编程，要求效果如下。
这里涉及到两块，一个是内容的切换显示，一个是红色的边框样式切换。
内容切换可以用纯js代码实现，但当这里还需设置一个红色边框样式的时候，JS里会出现大量CSS代码，所以统一使用className切换是更好的选择，不同的class样式可以在CSS文件中设置。这样JS的任务只剩下区分onclick元素和其他元素这一项了。
我的第一反应是给<p>内容部分加上房产/家居/二手房的id，通过if判断id是否与触发onclick选项的<li>.firstChild.nodeValue相等来分别设置样式。但是这里还涉及到<li>本身的样式切换，又要用一个if判断，显然非常麻烦，而且会出现if this.firstChild.nodeValue==li[i].firstChild.nodeValue这种逆天的代码。这里其实基于样式可以覆盖，直接遍历所有元素设置非点击样式，然后获取this来设置点击样式是比较方便的。就好像CSS代码习惯在最开始用*{margin:0px,padding:0px}初始化一样，这也是一个初始化的思想。
这里给oLis（每个li元素）设置了一个属性index来存放i，因为只有属性可以跟随变量，onclick事件函数只有触发后才开始执行代码，而i的循环是在onload时就运行完了，i的值将停留在oLis.length-1，这对切换样式没有影响，但是会影响到内容的切换，因为oLis和oDivs是通过i联系在一起的。
window.onload=function(){
var oTabs=document.getElementById("Tabs")
var oLis=document.getElementsByTagName(‘li‘);
var oDivs=document.getElementsByTagName(‘div‘);
for (var i = 0; i < oLis.length; i++) {
oLis[i].index=i;
oLis[i].onclick=function(){
for (var n = 0; n < oLis.length; n++) {
oLis[n].className="";
oDivs[n].className="hide";
}
this.className="on";
oDivs[this.index].className="";
}
}
}
html部分：现在就非常简洁了。
<body>
<div id="tabs">
<ul>
<li class="on">房产</li>
<li>家居</li>
<li>二手房</li>
</ul>
<div>
<p>275万购昌平邻铁三居 总价20万买一居</p>
<p>200万内购五环三居 140万安家东三环</p>
<p>北京首现零首付楼盘 53万购东5环50平</p>
<p>京楼盘直降5000 中信府公园楼王现房</p>
</div>
<div class="hide">
<p>40平出租屋大改造 美少女的混搭小窝</p>
<p>经典清新简欧爱家 90平老房焕发新生</p>
<p>新中式的酷色温情 66平撞色活泼家居</p>
<p>瓷砖就像选好老婆 卫生间烟道的设计</p>
</div>
<div class="hide">
<p>通州豪华3居260万 二环稀缺2居250w甩</p>
<p>西3环通透2居290万 130万2居限量抢购</p>
<p>黄城根小学学区仅260万 121平70万抛!</p>
<p>独家别墅280万 苏州桥2居优惠价248万</p>
</div>
</body>
比较复杂的是CSS代码，慕课网的答案是按这样的思路设计边框样式的，红色的那条线绑定在ul的border-bottom。非点击状态中li没有下边框，点击状态中li下边框为2px白色，就把红色位置的边框遮盖住了。当然ul要定高，依赖于li高度决定。会产生一个细节问题就是非点击状态下li加边框是29px，而ul是30px的高度，所以标签的下边框处会有1px的间隙，不能咬住红色的边框。
我自己做的时候，选择把红色边框作为div元素的上边框，设置Margin为-2px。所以我不需要Tabs的div来框住ul的宽度。但是间隙的问题依然存在。
另外有一点我也不是很确定，li的float:left和display:inline-block理论上是一样的效果，我注释掉浮动发现标签之间间距会变宽，1px的间隙神奇地消失了。注释掉display的代码没有发现任何变化。网上查了一下有一种是说display:inline-block会产生双倍边距是因为html代码中li之间存在换行符，试了一下放在一行中果然间距就正常了。间隙依然不知道是为什么。。。。
*{padding:0px;margin:0px;font:12px normal "microsoft yahei"}
#tabs{width:290px;padding:5px;height:150px;margin:20px;}
#tabs ul{
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:28px;
line-height:28px;
margin:0px 3px;
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;}
#tabs div{
height:120px;
line-height:25px;
border:1px solid #336699;
border-top:none;
padding:5px;
}
.hide{display:none;}
一个比较基础的题，然而还是做了挺久的，时间基本都花在改BUG上了TAT。。
以上是关于慕课编程题JS选项卡切换的主要内容，如果未能解决你的问题，请参考以下文章