js實現(xiàn)簡單選項卡功能

更新時間：2020年03月23日 10:04:20 作者：Max-人定

這篇文章主要為大家詳細介紹了使用JS實現(xiàn)簡單的選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文為大家分享了js實現(xiàn)簡單選項卡功能的具體代碼，供大家參考，具體內(nèi)容如下

首先我們來寫HTML代碼，構建出整體結構

代碼如下：

<!--導航欄部分HTML代碼-->
<nav id="nav">
 <ul>
 <li class="act">選卡1</li>
 <li>選卡2</li>
 <li>選卡3</li>
 <li>選卡4</li>
 </ul>
</nav>
<!--內(nèi)容部分HTML代碼-->
<div id="container">
 <section class="tab" style="background-color: tomato">內(nèi)容1</section>
 <section class="tab" style="background-color: cyan">內(nèi)容2</section>
 <section class="tab" style="background-color: blueviolet">內(nèi)容3</section>
 <section class="tab" style="background-color: gold">內(nèi)容4</section>
</div>

注：section 部分添加了style，目的是方便演示，為規(guī)范HTML與css的代碼風格，不推薦這樣使用。

接著我們使用css代碼構建出樣式

代碼如下：

*{
 text-align: center;
 }
 nav li{
 display: inline;
 width: 24%;
 text-decoration: none;
 padding: 15px;
 }
 li:hover{
 background-color: lightblue;
 }
 section{
 height: 300px;
}

最后是js的代碼，實現(xiàn)選項卡功能

代碼如下：

window.onload=function () {
 //獲取 li 也就是選項卡選項tab
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');
 //獲取 包裹在container里面的section（內(nèi)容）
 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 //使用 循環(huán)依次得到li 
 for(var i=0;i<oNav.length;i++){
 oNav[i].index=i;
 //每一次得到li后執(zhí)行鼠標點擊操作則觸發(fā)函數(shù)function 
 oNav[i].onclick=function () { //此處除了可以使用onclick，還可以使用onmouseover
 //在li的個數(shù)內(nèi)依次展示內(nèi)容 
 for(var i=0;i<oNav.length;i++){
 oNav[i].className='';
 oDiv[i].style.display="none";
 }
 this.className='act';
 oDiv[this.index].style.display="block"
 }
 for(var m=1;m<oNav.length;m++){
 oNav[m].className='';
 oDiv[m].style.display="none";
 }
 }
};

此上就是用js實現(xiàn)簡單選項卡的全部內(nèi)容，下面是整個代碼，復制粘貼到編譯器即可運行

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 text-align: center;
 }
 nav li{
 display: inline;
 width: 24%;
 text-decoration: none;
 padding: 15px;
 }
 li:hover{
 background-color: lightblue;
 }
 section{
 height: 300px;
 }
 </style>
</head>
<body>
<!--導航欄部分HTML代碼-->
<nav id="nav">
 <ul>
 <li class="act">選卡1</li>
 <li>選卡2</li>
 <li>選卡3</li>
 <li>選卡4</li>
 </ul>
</nav>
<!--內(nèi)容部分HTML代碼-->
<div id="container">
 <section class="tab" style="background-color: tomato">內(nèi)容1</section>
 <section class="tab" style="background-color: cyan">內(nèi)容2</section>
 <section class="tab" style="background-color: blueviolet">內(nèi)容3</section>
 <section class="tab" style="background-color: gold">內(nèi)容4</section>
</div>
<script>
 window.onload=function () {
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');

 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 for(var i=0;i<oNav.length;i++){
 oNav[i].index=i;
 oNav[i].onclick=function () {
 for(var i=0;i<oNav.length;i++){
 oNav[i].className='';
 oDiv[i].style.display="none";
 }
 this.className='act';
 oDiv[this.index].style.display="block"
 }
 for(var m=1;m<oNav.length;m++){
 oNav[m].className='';
 oDiv[m].style.display="none";
 }
 }
 };
</script>
</body>
</html>

以下是效果圖