js實現簡單選項卡功能

來源：懂視網責編：小OO 時間：2020-11-27 22:09:37

js實現簡單選項卡功能

本文為大家分享了js實現簡單選項卡功能的具體代碼，供大家參考，具體內容如下：首先我們來寫HTML代碼，構建出整體結構。代碼如下：<。--導航欄部分HTML代碼-->；<；nav id="nav">；<；ul>；<；li class="act">；選卡1<；/li>；<；li>；選卡2<；/li>；<；li>；選卡3<；/li>；<；li>；選卡4<；/li>；<；/ul>；<；/nav>；<注：section 部分添加了style，目的是方便演示，為規范HTML與css的代碼風格，不推薦這樣使用。接著我們使用css代碼構建出樣式。代碼如下：

推薦度：

點擊下載本文 文檔為doc格式

導讀本文為大家分享了js實現簡單選項卡功能的具體代碼，供大家參考，具體內容如下：首先我們來寫HTML代碼，構建出整體結構。代碼如下：<。--導航欄部分HTML代碼-->；<；nav id="nav">；<；ul>；<；li class="act">；選卡1<；/li>；<；li>；選卡2<；/li>；<；li>；選卡3<；/li>；<；li>；選卡4<；/li>；<；/ul>；<；/nav>；<注：section 部分添加了style，目的是方便演示，為規范HTML與css的代碼風格，不推薦這樣使用。接著我們使用css代碼構建出樣式。代碼如下：

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

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

代碼如下：

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

注：section 部分添加了style，目的是方便演示，為規范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的代碼，實現選項卡功能

代碼如下：

window.onload=function () {
 //獲取 li 也就是選項卡選項tab
 var nav=document.getElementById('nav');
 var oNav=nav.getElementsByTagName('li');
 //獲取 包裹在container里面的section（內容）
 var container=document.getElementById('container');
 var oDiv=container.getElementsByClassName('tab');
 //使用 循環依次得到li 
 for(var i=0;i<oNav.length;i++){
 oNav[i].index=i;
 //每一次得到li后執行鼠標點擊操作則觸發函數function 
 oNav[i].onclick=function () { //此處除了可以使用onclick，還可以使用onmouseover
 //在li的個數內依次展示內容 
 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實現簡單選項卡的全部內容，下面是整個代碼，復制粘貼到編譯器即可運行

<!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>
<!--內容部分HTML代碼-->
<div id="container">
 <section class="tab" style="background-color: tomato">內容1</section>
 <section class="tab" style="background-color: cyan">內容2</section>
 <section class="tab" style="background-color: blueviolet">內容3</section>
 <section class="tab" style="background-color: gold">內容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>

以下是效果圖

這里寫圖片描述