js實現簡單選項卡功能

2019-11-19 13:12:07

字體：大中小

來源：轉載

供稿：網友

本文為大家分享了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>

以下是效果圖

這里寫圖片描述