导航切换设计到CSS中标签属性设置：隐藏、显示
涉及html5异步传输的特性
更需要知道js多标签时候元素选择的写法
再啰嗦一下：classLIst属性返回元素的类名，可以用方法add()、remove()添加class属性
setAttribute(name,value)设置新属性及其值，或者修改已有属性的值
正文
上导航切换的示意图
js代码：
<script>
window.onload = function () { //window.onload:就是等整个页面内容全部加载完毕
//填写js逻辑
//获取ul里li的个数
var tab_ui = document.getElementsByTagName("ul");
var tab_li= tab_ui[0].getElementsByTagName("li")
//获取要显示的div的个数
var content = document.getElementById("content");
var content_div = content.getElementsByTagName("div");
//给li添加鼠标点击事件
for(var i= 0;i<tab_li.length;i++){
tab_li[i].index = i; //异步传输，不设置的话，得到的都是i的最大值
tab_li[i].onclick = function () {
//清除之前的样式
for(var j=0;j<tab_li.length;j++){
//没有点击事件，j=0,1,2
tab_li[j].classList.remove("active");
content_div[j].setAttribute("class","hidden");
}
//设置自己本身的样式:添加class=active
this.setAttribute("class","active");
//content_div[i].classList.remove("hidden"); 无效，i=3导致
//将对应的内容显示出来
content_div[this.index].classList.remove("hidden");
}
}
//给li添加鼠标点击事件
var tab_ui = document.getElementsByTagName("ul");
var tab_li1= tab_ui[1].getElementsByTagName("li")
//var tab_li1= document.getElementsById("li")
var content1 = document.getElementById("content1");
var content1_div = content1.getElementsByTagName("div");
for(var i= 0;i<tab_li1.length;i++){
tab_li1[i].index = i; //重点，为了让i在循环体内
tab_li1[i].onmouseover = function () {
//这里的i永远=3，如果不设置 tab_li[i].index = i
//清除之前的样式
for(var j=0;j<tab_li1.length;j++){
//没有点击事件，j=0,1,2
tab_li1[j].classList.remove("active");
content1_div[j].setAttribute("class","hidden");
}
//设置自己本身的样式:添加class=active
this.setAttribute("class","active");
//content_div[i].classList.remove("hidden"); 无效，i=3导致
//将对应的内容显示出来
content1_div[this.index].classList.remove("hidden");
}
}
}
</script>
css代码
<style>
.hidden{
display: none;
}
.tabdemo>.active{
background: red;
border-bottom-color:white ;
}
#wrap{
height: 58px;
background-color: #c7eafa;
}
.tabdemo {
width: 100%;
list-style: none;
margin: 0 auto;
background-color: blue;
}
.tabdemo1 {
width: auto;
list-style: none;
margin: 0 auto;
background-color: pink;
float:left;
}
li{
color: rgb(0, 0, 0);
display:inline-block;
}
ul.tabdemo1 li {
color: rgb(224, 9, 9);
display:block;
}
li:hover{
background-color: lavender;
}
a{
/*
一定注意要把a转成行内块元素，
如果转的是块元素那么短竖线会掉下去，
因为块级元素是独占一行的
*/
display:inline-block;
padding: 0 20px;
line-height: 58px;
text-decoration: none;
color: black;
}
</style>
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多导航切换</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
//js代码、css代码放在这里
<body>
<div id="wrap">
<div>
<ul class="tabdemo">
<li class="active "><a class="ac" href="#">选择1</a></li>
<li><a class="ac" href="#">选择2</a></li>
<li><a class="ac" href="#">选择3</a></li>
</ul>
</div>
<!--弹出内容-->
<div id="content" style="padding:1px;border:dashed;">
<div id="first" class="show">
<a href="#">内容一</a>
<a href="#">内容一</a>
<a href="#">内容一</a>
<a href="#">内容一</a>
</div>
<div id="second" class="hidden">
<a href="#">内容二</a>
<a href="#">内容二</a>
<a href="#">内容二</a>
<a href="#">内容二</a>
</div>
<div id="third" class="hidden">
<a href="#">内容三</a>
<a href="#">内容三</a>
<a href="#">内容三</a>
<a href="#">内容三</a>
</div>
</div>
<!--弹出内容-->
<div>
<ul class="tabdemo1">
<li class="active "><a class="ac" href="#">选择1</a></li>
<li><a class="ac" href="#">选择2</a></li>
<li><a class="ac" href="#">选择3</a></li>
</ul>
</div>
<div id="content1" style="padding:1px;border:dashed;">
<div id="first" class="show">
<a href="#">内容一</a>
<a href="#">内容一</a>
<a href="#">内容一</a>
<a href="#">内容一</a>
</div>
<div id="second" class="hidden">
<a href="#">内容二</a>
<a href="#">内容二</a>
<a href="#">内容二</a>
<a href="#">内容二</a>
</div>
<div id="third" class="hidden">
<a href="#">内容三</a>
<a href="#">内容三</a>
<a href="#">内容三</a>
<a href="#">内容三</a>
</div>
</div>
</div>
</body>
</html>
