20160303小结

发表于   |   分类于   |  

慕课网js进阶篇第10章

习题链接

效果图

思路

  1. HTML部分很简单，上面的选项卡用ul嵌套li，下面用3个div，最后套个大div方便元素选取

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id = "div1">
    	<ul>
    		<li>房产</li>
    		<li>家居</li>
    		<li>二手房</li>
    	</ul>
    	<div>房产</div>
    	<div>家居</div>
    	<div>二手房</div>
    </div>

  2. CSS部分，首先让里面的3个div隐藏，只给选中的div加个显示的class，同理给选中的<li>加激活的class。<li>的border-top很简单，border-bottom要配合ul、li的height和line-height一起实现。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    ul {
    	height: 30px;
    	line-height: 30px;
    	border-bottom: 2px solid red;
    }
    li {
    	height: 28px;
    	line-height: 28px;
    	border: 1px solid #999;
    	border-bottom: none; 
    // 这步是关键，隐藏li的border-bottom只显示ul的border-bottom
    }
    li.active {border-bottom: 2px solid #fff}
    // 选择时激活li的border-bottom，视觉上覆盖了ul的border-bottom

  3. js部分，首先window.onload = function(){}，确保页面载入完整后在执行js，然后用getXXX选取li和div，第一次循环遍历li，自定义li的index属性，定义鼠标点击或划过的函数，再次循环遍历li，先把li和div的className设为“”，再通过this.className赋值，div用[this.index].className赋值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    window.onload = function() {
    	var div1 = document.getElementById("div1");
        var aLi = div1.getElementsByTagName("li");
        var aDiv = div1.getElementsByTagName("div");
    	for (var i = 0; i < aLi.length; i++) {
    		aLi[i].index = i;
    		aLi[i].onmouseover = function(){
    			for(var i = 0; i < aLi.length; i++){
    				aLi[i].className = "";
    				aDiv[i].className = "";
    }
    			this.className = "active";
    			aDiv[this.index].className = "active2";
    }
    }
    }

在线Demo

null和undefined

  • 在if语句里，null和undefined都会被解析为false,用相等运算（==）连接两者，返回true
1
2
3
4
5
6
7
8
9
10
if (! null) {
  console.log("null is false");
}
// null is false
if (! undefined) {
  console.log("undefined is false");
}
// undefined is false
null == undefined;
// true
  • null表示“无”的对象，转为数值时为0；undefined表示“无”的原始值，转为数值时为NaN
1
2
3
4
Number(null);
// 0
Number(undefined);
// NaN