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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(5)
Dec 23 Javascript
JavaScript 编程引入命名空间的方法与代码
Aug 13 Javascript
javascript new一个对象的实质
Jan 07 Javascript
jquery插件之easing使用
Aug 19 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
JavaScript中将数组进行合并的基本方法讲解
Mar 07 Javascript
js严格模式总结(分享)
Aug 22 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
JointJS JavaScript流程图绘制框架解析
Aug 15 Javascript
Vue组件模板及组件互相引用代码实例
Mar 11 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
javascript canvas封装动态时钟
Sep 30 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
Zend引擎的发展 [15]
2006/10/09 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
取得父标签
2006/11/14 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
jquery 手势密码插件
2017/03/17 Javascript
VUE引入第三方js包及调用方法讲解
2019/03/01 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
Python将string转换到float的实例方法
2019/07/29 Python
Python 实现进度条的六种方式
2021/01/06 Python
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
2014年社区学雷锋活动总结
2014/03/09 职场文书
大学生新学期计划书
2014/04/28 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
置业顾问岗位职责
2015/02/09 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
教师节联欢会主持词
2015/07/04 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技