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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
jquery实现倒计时功能
Dec 28 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
JavaScript原型链详解
Nov 07 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
一个PHP模板,主要想体现一下思路
2006/12/25 PHP
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
Javascript基础教程之argument 详解
2015/01/18 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
2019/11/01 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
python使用SMTP发送qq或sina邮件
2017/10/21 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Python爬虫中Selenium实现文件上传
2020/12/04 Python
如何强制垃圾回收
2015/10/06 面试题
生态养殖创业计划书
2014/05/06 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
导游词之张家界
2019/10/31 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS
Java集成swagger文档组件
2021/06/28 Java/Android