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 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
原生js开发的日历插件
Feb 04 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
在PHP中使用redis
2013/11/04 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
解析Python中的异常处理
2015/04/28 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Python-opencv 双线性插值实例
2020/01/17 Python
8和9的加减法教学反思
2014/05/01 职场文书
2015年学生会部门工作总结
2015/04/21 职场文书
经营目标责任书
2015/05/08 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
欧元符号 €
2022/02/17 杂记
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
python实现学员管理系统(面向对象版)
2022/06/05 Python
windows系统搭建WEB服务器详细教程
2022/08/05 Servers