js实现简单选项卡功能


Posted in Javascript onMarch 23, 2020

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

以下是效果图

js实现简单选项卡功能

js实现简单选项卡功能

js实现简单选项卡功能

js实现简单选项卡功能

注:网上还用很多用jQuery实现选项卡的方法,只需三行,等下次有机会弄懂了再分享。

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
FireFox JavaScript全局Event对象
Jun 14 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
JavaScript获取按钮所在form表单id的方法
Apr 02 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
Vue异步加载about组件
Oct 31 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
Angular8基础应用之表单及其验证
Aug 11 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
js实现轮播图的完整代码
Oct 26 #Javascript
JQuery扩展对象方法操作示例
Aug 21 #jQuery
详解Vue结合后台的列表增删改案例
Aug 21 #Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 #Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 #Javascript
小程序开发基础之view视图容器
Aug 21 #Javascript
详解微信小程序的 request 封装示例
Aug 21 #Javascript
You might like
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PDO::inTransaction讲解
2019/01/28 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
Angular 项目实现国际化的方法
2018/01/08 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
Python实现的密码强度检测器示例
2017/08/23 Python
Python输入二维数组方法
2018/04/13 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
园林毕业生自我鉴定范文
2013/12/29 职场文书
单位在职证明书
2014/09/11 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
幼师自荐信范文
2015/03/06 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
高一军训感想
2015/08/07 职场文书