目录
案例一：
点击上方的导航栏，导航栏的背景颜色发生改变，文字也发生改变，下方的主内容发生相应的改变
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.tab{
width: 850px;
margin: 100px auto;
}
.tab_list{
height: 39px;
border: 1px solid rgb(216, 216, 216);
background-color: #f1f1f1;
}
.tab_list li{
float: left;
height: 39px;
line-height: 39px;
padding: 0 35px;
text-align: center;
cursor: pointer;/*鼠标放置显示手指状态*/
}
.tab_list .current{
background-color: #c81623;
color: #fff;
}
.item{
display: none;
}
</style>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">商品简介的内容</div>
<div class="item">规格与包装内容</div>
<div class="item">售后保障内容</div>
<div class="item">商品评价内容</div>
<div class="item">手机社区内容</div>
</div>
</div>
<script>
//获取标签部分所有元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');//数组：而且还是tab_list下li的数组
//获取所有的内容
var items = document.querySelectorAll('.item');//内容的数组
//给每个标签绑定click事件
for(var i=0;i<lis.length;i++){//排他：去掉所有标签的样式
//给每一个标签添加index索引
lis[i].setAttribute('index',i);
lis[i].onclick = function(){
for(var j=0;j<lis.length;j++){
lis[j].className = '';
}
this.className = 'current';
//下面的显示内容模块
var index = this.getAttribute('index');//获取当前标签的index
for(var k=0;k<items.length;k++){//排他：将所有的index隐藏
items[k].style.display = 'none';
}
items[index].style.display = 'block';
}
}
</script>
</body>
案例二：
鼠标悬浮在上方的导航栏上时，弹出下拉导航栏
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
font-size: 14px;
}
.nav{
margin: 100px 100px;
}
.nav>li{
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a{
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover{
background-color: #eee;
}
.nav ul{
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #fecc5b;
border-right: 1px solid #fecc5b;
}
.nav ul li{
border-bottom: 1px solid #fecc5b;
}
.nav ul li a:hover{
background-color: #fff5da;
}
</style>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">留言板</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">电话</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">邮箱</a>
<ul>
<li>
<a href="#">私信</a>
</li>
<li>
<a href="#">评论</a>
</li>
<li>
<a href="#">@我</a>
</li>
</ul>
</li>
</ul>
<script>
//1、获取外层的ul及其子节点
var nav = document.querySelector('.nav');
var lis = nav.children;//获取所有的子元素节点
//2、给每个li（菜单项）绑定鼠标进入和鼠标移开的事件
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(){
this.children[1].style.display = 'block';//下标时1，因为要避开a。
}
lis[i].onmouseout = function(){
this.children[1].style.display = 'none';
}
}
</script>
</body>