怎麼說呢，最近在寫一個後臺管理模板，發現以前寫的tab切換現在有點達不到自己心裏的標準，所以就重新寫了一個，本着擁抱原生js的原則，就放棄了jQuery。下面廢話不多說，先看一下效果圖吧：
看一下效果圖，如果是您想要的話，那麼您再繼續往下面看，算了，還是直接一點直接上代碼吧，下面代碼不依賴任何插件，也就是說，您直接複製一下打開就能看效果啦。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>js實現tab切換</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.container {
margin: 100px;
}
.tab_ul {
background-color: #5edbbe;
overflow: hidden;
}
.tab_ul li {
float: left;
padding: 15px;
cursor: pointer;
}
.tab_ul .active {
color: #ec1818;
}
.tab_content {
background-color: #F6F6F6;
min-height: 250px;
padding: 15px;
overflow: hidden;
}
.tab_child {
display: none;
animation: hideTab 0.5s;
-moz-animation: hideTab 0.6s;/* Firefox */
-webkit-animation: hideTab 0.6s;/* Safari and Chrome */
}
@keyframes hideTab {
0% {
opacity: 0;
transform: translate(200px, 0)
}
100% {
opacity: 1;
transform: translate(0, 0)
}
}
</style>
</head>
<body>
<div class="container">
<ul class="tab_ul">
<li class="active">選項一</li>
<li>選項二</li>
<li>選項三</li>
</ul>
<div class="tab_content">
<div class="tab_child" style="display: block;">
<p>“你羨慕我 一身瀟灑 無牽無掛，我卻羨慕你，有家、有她、有人等你回家”</p>
</div>
<div class="tab_child">
<p>我上了那麼多年學，熬了那麼多夜，做那麼多習題，頂着各種各樣的壓力，參加各種殘酷的考試，談戀愛，分手，工作，加班。我這麼辛苦，竟然是爲了成爲一個普通人......——《生而爲人》</p>
</div>
<div class="tab_child">
<p>“有人問我暗戀是什麼感覺，我下意識的回答：好像是在商店看到喜歡的玩具，想買，錢不夠，努力存錢，回頭去看的時候發現漲價了，更加拼命的存錢，等我錢攢夠的時候，再回去發現已經被買走了。希望不會在垃圾堆看到這玩具，不然我依然會把它撿起來。”</p>
</div>
</div>
</div>
<script type="text/javascript">
var tab = document.getElementsByClassName('tab_ul')[0];
var tabList = tab.getElementsByTagName('li');
var tabChild = document.getElementsByClassName('tab_child');
for (let i = 0; i < tabList.length; i++) {
tabList[i].onclick = function() {
tabInit()
this.classList.add('active');
tabChild[i].setAttribute('style', 'display:block');
}
}
//初始化tab
function tabInit() {
for (let i = 0; i < tabList.length; i++) {
tabList[i].classList.remove('active')
tabChild[i].setAttribute('style', 'display:none')
}
}
</script>
</body>
</html>
另外需要多說一點的是，這個tab選項卡實現的動態效果是靠css3的animation和keyframes完成的，上面有代碼體現，代碼很簡短，自己研究一下吧。