2015.7.7js-05（选项卡）

this的使用

1.this默认指向window,不指定事件元素的时候this指定的是window

2.指定事件元素的时候，this指定当前发生事件的元素

选项卡（JS），this的使用，先清空所有按钮，再选中当前按钮

<script type="text/javascript">
//js
window.onload = function(){
　　var tag = document.getElementById("tab");　　　　　 //获取li标题的父级
　　var li = tag.getElementsByTagName("li");　　　　　　  //获取li标题的数组，用于循环到得当前点击
　　var content = document.getElementById("content");　//获取div内容的父级
　　var div = content.getElementsByTagName("div");　　 //获取div内容的数组，用于循环显示当li标题点击时根据li的序号显示相应序号的div

　　for(var i = 0, len = li.length; i < len; i++){　　　　　　 //循环点击li标题
　　　　li[i].index = i;　　　　　　　　　　　　　　　　　　  　　 //存入序号；
　　　　li[i].onclick = function(){　　　　　　　　　　　　　 　 //给当前li添加点击事件
　　　　　　for(var j = 0, len = li.length; j < len; j++){　　//再次循环li标题
　　　　　　　　li[j].className = "";　　　　　　　　　　　  　　 //清空所有class
　　　　　　　　div[j].style.display = "none";　　　　　　　    //将所有div内容隐藏
　　　　　　}
　　　　　　this.className = "active";　　　　　　　　　　  　　//当前点击添加高亮class
　　　　　　div[this.index].style.display = "block"　　　　　 //显示当前的
　　　　}　　　　
　　}
}

 

 

//jquery
$(function(){
　　$("#tab ul li").on("click",function(){
　　　　$(this).addClass("active").siblings().removeClass("active");　　//当前的li点击添加高亮class，同级的li删除class;
　　　　var iThis = $(this).index();　　　　　　　　　　　　　　　　　　　　//当前序号
　　　　$("#content > div").eq(iThis).show().siblings().hide();　　　　//id为content的div层的仅子代div根据li的点击而显示同序号的div
　　});
});

 

//ps: $("#content > div")表示：仅子代的div，孙子代不在范围。

//ps:鼠标点击click事件也可以换成mouseover事件

<div id="tab">
　　<ul>
　　　　<li class="active">study</li>
　　　　<li>home</li>
　　　　<li>next</li>
　　</ul>
</div>
<div id="content">
　　<div style="display:block;">1</div>    
　　<div>2</div>
　　<div>3</div>
</div>