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选项卡切换的更多相关文章

  1. js选项卡切换效果

    选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...

  2. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  3. js实现选项卡切换

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  4. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  5. 常用js效果：选项卡切换

    js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码: <style> .txtadsblk01{ width:200px;} ...

  6. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  7. JS编程题练习

    JS编程题练习 1. 两个数组合并成一个数组排序返回 先依次比较两个数组,按照小的就传入新的数组.当这次比较完之后可能有一个数组的长度很长,留下一些数组,然后在新数组的末尾插入即可. function ...

  8. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  9. 五四青年节，今天要学习。汇总5道难度不高但可能遇到的JS手写编程题

    壹 ❀ 引 时间一晃,今天已是五一假期最后一天了,没有出门,没有太多惊喜与意外.今天五四青年节,脑子里突然想起鲁迅先生以及悲欢并不相通的话,我的五一经历了什么呢,忍不住想说那大概是,父母教育孩子大声嚷 ...

随机推荐

  1. thinkphp 介绍

    一.ThinkPHP的介绍             MVC  M - Model 模型                工作:负责数据的操作  V - View  视图(模板)        工作:负责 ...

  2. 从输入 URL 到浏览器接收的过程中发生了什么事情

    从输入 URL 到浏览器接收的过程中发生了什么事情? 原文:http://www.codeceo.com/article/url-cpu-broswer.html 从触屏到 CPU  首先是「输入 U ...

  3. springmvc 自定义注解 以及自定义注解的解析

    1,自定义注解名字 @Target({ElementType.TYPE, ElementType.METHOD})   //类名或方法上@Retention(RetentionPolicy.RUNTI ...

  4. iOS 9正式版开始推送 升级机型非常广泛

    北京时间今日零时,苹果正式推送了iOS9,对于iPhone和iPad来说这一版系统升级都有很多重要改进,而升级的机型也非常宽泛,甚至连2011年的iPad 2与iPhone 4s都获得了支持,所以广大 ...

  5. javascript设计模式之观察者模式

    观察者模式又称发布/订阅模式   publish/subscribe 它是一种一对多的关系,让多个观察者对象同时监听某一主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得他们能够自动 ...

  6. java程序链接到sql server数据库

    package jianhua; import java.sql.*; public class ConDatabase { public static void main(String[] args ...

  7. android中加载的html获取的宽高不正确

    wap页面使用 js库是zepto,按照惯例在$(function(){})中,来获取当前可视区的宽高,但得到的宽高却与预想的相差十万八千里. 原本android手机的浏览器设定的宽高基本是360*6 ...

  8. 自学 PHP，如何不走弯路？

    1.一本好书至关重要.如果这本书的知识非常深入,那么还是不要看了.对初学者来说只能是打击.因为很多东西都看不懂.一本知识较为浅显,并且说明非常详细,但是能让你上手的基础知识又非常完善的书籍就非常好.( ...

  9. MIT JOS学习笔记02：kernel 01（2016.10.28）

    未经许可谢绝以任何形式对本文内容进行转载! 在文章开头不得不说的是,因为这部分的代码需要仔细理清的东西太多,所以导致这篇分析显得很啰嗦,还请谅解. 我们在上一篇文章已经分析了Boot Loader的功 ...

  10. iOS_Swift初识之使用三种回调方式自定义Button

    最近在学习Swift ,发现青玉伏案大神早期用OC写的一篇博客--IOS开发之自定义Button(集成三种回调模式)  很适合用来熟悉Swift的回调方式,于是我就用Swift翻版了一下,具体实现原理 ...