js实现简单选项卡功能

2018-10-15 18:04

阅读：614

本文为大家分享了js实现简单选项卡功能的具体代码，供大家参考，具体内容如下

首先我们来写HTML代码，构建出整体结构

代码如下：

<nav id=nav> <ul> <li class=act>选卡1</li> <li>选卡2</li> <li>选卡3</li> <li>选卡4</li> </ul> </nav>  <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的代码，实现选项卡功能

代码如下：

此上就是用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>  <nav id=nav> <ul> <li class=act>选卡1</li> <li>选卡2</li> <li>选卡3</li> <li>选卡4</li> </ul> </nav>  <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>

以下是效果图