在网页中经常会遇到导航栏切换效果，也就是鼠标放到某一导航栏上，底下对应的内容就会发生变化．下面说一下实现思路：
首先说下this的用法：
this在事件中指向的是事件源对象，来看下面这段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>try</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
img{
width:200px;
height: 200px;
float: left;
margin:20px;
}
</style>
<script>
window.onload = function () {
//抓到所有的img元素
var imgs = document.getElementsByTagName('img');
//循环所有的图片元素,给每个图片元素加单击事件
for(var i = 0;i < imgs.length; i++){
imgs[i].onclick = function () {
//this指向的是事件源对象
this.style.visibility = 'hidden';
}
}
}
</script>
<body id='hd'>
<img src="01.jpg" alt="">
<img src="02.jpg" alt="">
<img src="03.jpg" alt="">
<img src="04.jpg" alt="">
<img src="05.jpg" alt="">
<img src="06.jpg" alt="">
<img src="07.jpg" alt="">
<img src="08.jpg" alt="">
</body>
</html>
这段代码实现了点击８张图片中的任意一张，对应图片就消失的效果．思路是获得所有的图片元素，循环所有的图片元素，给每个图片元素加单击事件，this在这里指向的是事件源对象，也就是点击的对象，即点击的图片．
下面就说一下如何实现tab切换吧，
页面布局如下图：
鼠标移动到某一块导航栏时触发onmouseover事件，对应的模块内容显示，其他模块内容隐藏，this指向事件源对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab 选项卡效果</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#tab{
width:600px;
height:500px;
border:5px solid purple;
margin:0 auto;
position: relative;
}
#tab ul li{
list-style: none;
float: left;
width:200px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
}
#tab .con{
width: 580px;
height: 420px;
left:10px;
top: 60px;
position: absolute;//相对于父级元素定位一下
display: none;
}
</style>
</head>
<script>
window.onload = function(){
var tab = document.getElementById("tab");//通过id 获取元素
var lis = document.getElementsByTagName("li");//通过标签名获取元素
var cons = document.getElementsByClassName("con");//通过class获取元素
//循环遍历每一个li标签
for(var i = 0; i < lis.length; i ++){
lis[i].num = i;//给每一个标签加序号
lis[i].onmouseover = function(){//给每一个标签li加onmouseover事件
//显示之前先让所有的con隐藏
for(var j = 0; j < cons.length; j ++){
cons[j].style.display = 'none';
}
// 让this.num对应的con显示,this在事件中指向的是事件源对象
cons[this.num].style.display = 'block';
}
}
}
</script>
<body>
<div id="tab">
<ul>
<li style="background-color: blue;">新闻</li>
<li style="background-color: orange;">热点</li>
<li style="background-color: green;">军事</li>
</ul>
<div class="con" style="background-color: blue;display:block;"></div>
<div class="con" style="background-color: orange"></div>
<div class="con" style="background-color: green"></div>
</div>
</body>
</html>