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>

以下是效果图

这里写图片描述