我们经常使用tabs栏切换 在这里我总结了一下tabs栏的切换方式。
1.使用伪类 ：target 切换
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="author" content="" />
<style>
.test .hd{padding:10px 0;}
.test .nav{position:fixed;right:10px;left: 540px;}
.test .nav a{display:block;margin: 10px 0;}
/* 重点 */
.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;display: none;}
.test .bd h2{border-bottom:1px solid #ddd;}
/* 重点 */
.test .bd .panel:target{display: block;}
h2,p{margin:0;padding:10px;font-size:16px;}
</style>
</head>
<body>
<div class="test">
<div class="hd nav">
<a href="#panel1">前往区块1</a>
<a href="#panel2">前往区块2</a>
<a href="#panel3">前往区块3</a>
<a href="#panel4">前往区块4</a>
<a href="#panel5">前往区块5</a>
</div>
<div class="bd">
<div id="panel1" class="panel active">
<h2>区块1</h2>
<div><p>区块1内容</p><p>区块1内容</p><p>区块1内容</p></div>
</div>
<div id="panel2" class="panel">
<h2>区块2</h2>
<div><p>区块2内容</p><p>区块2内容</p><p>区块2内容</p></div>
</div>
<div id="panel3" class="panel">
<h2>区块3</h2>
<div><p>区块3内容</p><p>区块3内容</p><p>区块3内容</p></div>
</div>
<div id="panel4" class="panel">
<h2>区块4</h2>
<div><p>区块4内容</p><p>区块4内容</p><p>区块4内容</p></div>
</div>
<div id="panel5" class="panel">
<h2>区块5</h2>
<div><p>区块5内容</p><p>区块5内容</p><p>区块5内容</p></div>
</div>
</div>
</div>
</body>
<script >
</script>
</html>
这段代码中，最重要的两句是
.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;display: none;}
.test .bd .panel:target{display: block;}
我们先把所有的带有 class='panel' 都隐藏了 。然后我们点击相关链接就会显示相关的内容。
效果如下：
哎呀妈呀！不写js也可以实现tabs切换 这个太厉害了，是的这个就是使用：target 伪类选着器的。
使用注意事项：
1.点击链接必须是a标签，且给a标签的href="#+内容";
2.对应的内容标签必须设置id 且和 a 标签中的 href 必须相同；
缺点：
这种效果虽然很简单， 很好使用。 但是，有一个缺点，那就是页面第一次打开的时候，不会有内容来显示。所有若果想显示相应的,必须写相应的js,控制他显示第一个。
使用技术： a标签的锚点；
2.使用js来控制
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test .hd{padding:10px 0;}
.test .nav{position:fixed;right:10px;left: 540px;}
.test .nav a{display:block;margin: 10px 0;}
.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;display: none;}
.test .bd h2{border-bottom:1px solid #ddd;}
h2,p{margin:0;padding:10px;font-size:16px;}
.test .bd .active{
display: block;
}
.test .panel.active{
background:red;
}
</style>
</head>
<body>
<div class="test">
<div class="hd nav">
<a href="#panel1">前往区块1</a>
<a href="#panel2">前往区块2</a>
<a href="#panel3">前往区块3</a>
<a href="#panel4">前往区块4</a>
<a href="#panel5">前往区块5</a>
</div>
<div class="bd">
<div id="panel1" class="panel active">
<h2>区块1</h2>
<div><p>区块1内容</p><p>区块1内容</p><p>区块1内容</p></div>
</div>
<div id="panel2" class="panel">
<h2>区块2</h2>
<div><p>区块2内容</p><p>区块2内容</p><p>区块2内容</p></div>
</div>
<div id="panel3" class="panel">
<h2>区块3</h2>
<div><p>区块3内容</p><p>区块3内容</p><p>区块3内容</p></div>
</div>
<div id="panel4" class="panel">
<h2>区块4</h2>
<div><p>区块4内容</p><p>区块4内容</p><p>区块4内容</p></div>
</div>
<div id="panel5" class="panel">
<h2>区块5</h2>
<div><p>区块5内容</p><p>区块5内容</p><p>区块5内容</p></div>
</div>
</div>
</div>
</body>
<script >
var panelall=document.querySelectorAll('.panel');
var a=document.querySelectorAll('a');
console.log(a[1]);
for(var i=0;i<a.length;i++){
a[i].index=i;
a[i].onclick=function(){
// 排他思想。
var old="panel";
var new1="panel active";
for(i=0;i<4;i++){
panelall[i].className=old;
}
panelall[this.index].className=new1;
}
}
</script>
</html>
这种实现方法比较好理解， 就是一个排他思想，在这里就不多做解释了。
自我思考：（看不懂可以自行忽视）
我以前学习angular.js 里面也要tabs切换，以前只会使用 不知道原理，现在明白了，在这里总结一下。
先总结一下效果：
1.tabs栏 可以实现切换。
2.它的tabs栏切换页面都是写在不同文件里面的，没有写在一个文件下里面。
第一个效果实现原理比较简单。使用上面的第二种方法就可以了。
那么，第二种效果是如何做到了呢？为什么不在同一文件里，页面可以实现内容跳转呢？
想了好久，终于明白了，我是根据一个现象明白的。是什么现象呢？
就是使用anglar.js必须使用服务器的访问方式而不能使用本地的访问方式。这个现象能说明什么么？？
然后我根据今天学习ajax的知识我推断出，我们可以通过异步请求得到我们子页面的内容，然后在使用我们的模板引擎把子页面的内容渲染到对应的地方，这样我们就可以跨页面写代码了。
而且也可以解释为什么angular.js不能在本地访问，只能在服务端访问。
