引言：为什么不仅仅做独立的选项卡为一个独立的网页，然后通过点击不同的标签来在不同的页面跳转来达到这个效果？“这样代码可能会简单一些，是的。但是这样每个独立的”页面“视图将会实际上是一个新加载的网页，跨视图更难保存信息，并把这个特征融入一个更大的UI设计。另外，所谓的”单页应用“正在变得非常流行——尤其是移动网页UI——因为把一切的服务放在一个单独的文件上可以减少HTTP请求的数量来浏览所有内容，从而提高性能。
在今天之前我做页面导航，即时单页导航也是知道导航是几个，然后根据导航的index或者eq来显示对应的content。今天看见了一个包装的导航切换，十分喜欢，大家看看吧,特别是js部分：
html:
<body>
<section class="info-box">
<ul>
<li>
<a href="#" class="active">Tab 1</a>
</li>
<li>
<a href="#">Tab 2</a>
</li>
<li>
<a href="#">Tab 3</a>
</li>
<li>
<a href="#">Tab 4</a>
</li>
</ul>
<div class="panels">
<article class="active-panel">
<h2>第一个导航</h2>
<p>第一内容随便写，撒旧社会开会撒谎好多了卡号电话回访垃圾分类</p>
</article>
<article>
<h2>第二个导航</h2>
<p>第二哈哈和哈哈哈卡的很临时卡记录都科技计算机阿富汗货发票；发建安街</p>
</article>
<article>
<h2>第三个导航</h2>
<p>第三看哈回复哈回复看拉菲hi哦网哈FIFA历史11埃里克森风即发生符合；浪费了</p>
<ol>
<li>沙河</li>
<li>长江</li>
<li>黄河</li>
</ol>
</article>
<article>
<h2>第四个导航</h2>
<p>第四想不出打开记录均砂浆的</p>
<ol>
<li>奥卡福两款发建安街</li>
<li>海外</li>
<li>岛上</li>
</ol>
</article>
</div>
</section>
<script type="text/javascript">
var tabs = document.querySelectorAll('.info-box li a');
var panels = document.querySelectorAll('.info-box article');
for(i = 0; i < tabs.length; i++) {
var tab = tabs[i];
setTabHandler(tab, i);
}
function setTabHandler(tab, tabPos) {
tab.onclick = function() {
for(i = 0; i < tabs.length; i++) {
if(tabs[i].getAttribute('class')) {
tabs[i].removeAttribute('class');
}
}
tab.setAttribute('class', 'active');
for(i = 0; i < panels.length; i++) {
if(panels[i].getAttribute('class')) {
panels[i].removeAttribute('class');
}
}
panels[tabPos].setAttribute('class', 'active-panel');
}
}
</script>
</body>
css：
html {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.info-box {
width: 400px;
height: 400px;
margin: 0 auto;
}
.info-box ul {
padding-left: 0;
margin-top: 0;
}
.info-box li {
float: left;
list-style-type: none;
width: 100px;
border: 1px solid #E5E5E5;
}
.info-box li a {
display: inline-block;
text-decoration: none;
width: 100%;
line-height: 3;
background-color: red;
color: black;
text-align: center;
}
.info-box li a:focus, .info-box li a:hover {
background-color: #a60000;
color: white;
}
.info-box li a.active {
background-color: #a60000;
color: white;
}
.info-box .panels {
height: 352px;
position: relative;
clear: both;
}
.info-box article {
width: 100%;
position: absolute;
top: 0;
left: 0;
height: 352px;
padding: 10px;
color: white;
background-color: #a60000;
}
.info-box article:first-child{
background:deepskyblue;
}
.info-box article:first-child+article{
background:blue;
}
.info-box article:first-child+article+article{
background:greenyellow;
}
.info-box article:first-child+article+article+article{
background:pink;
}
.info-box .active-panel {
z-index: 1;
}
就是这么酷炫 很喜欢 我要引用到项目上。