首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

用JS实现选项卡

Posted in Javascript onMarch 23, 2020

本文实例为大家分享了JS实现选项卡的具体代码，供大家参考，具体内容如下

案例描述

在浏览器中显示一个选项卡界面，头部为1、2、3、4、5。点击头部任意一个数字，都在下方显示出不同的信息，并且鼠标停留在任意一个数字上时，数字的颜色改变。案例如下图所示

默认的是数字1中的内容

用JS实现选项卡

点击数字二

用JS实现选项卡

点击其他数字依此类推，在这里就不一一展示了

HTML代码

全部HTML代码展示

<div id="table">
 <!-- 头部 -->
 <div id="header">
  <ul>
  <li class="selected">
   <a href="#" >1</a>
  </li>
  <li>
   <a href="#" >2</a>
  </li>
  <li>
   <a href="#" >3</a>
  </li>
  <li>
   <a href="#" >4</a>
  </li>
  <li>
   <a href="#" >5</a>
  </li>
  </ul>
 </div>
 <!-- 内容 -->
 <div id="content">
  <div class="dom" style="display: block">
  <ul>
   <li> <a href="#" >我是第一个选项卡的内容1</a></li>
   <li> <a href="#" >我是第一个选项卡的内容2</a></li>
   <li> <a href="#" >我是第一个选项卡的内容3</a></li>
   <li> <a href="#" >我是第一个选项卡的内容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第二个选项卡的内容1</a></li>
   <li> <a href="#" >我是第二个选项卡的内容2</a></li>
   <li> <a href="#" >我是第二个选项卡的内容3</a></li>
   <li> <a href="#" >我是第二个选项卡的内容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第三个选项卡的内容1</a></li>
   <li> <a href="#" >我是第三个选项卡的内容2</a></li>
   <li> <a href="#" >我是第三个选项卡的内容3</a></li>
   <li> <a href="#" >我是第三个选项卡的内容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第四个选项卡的内容1</a></li>
   <li> <a href="#" >我是第四个选项卡的内容2</a></li>
   <li> <a href="#" >我是第四个选项卡的内容3</a></li>
   <li> <a href="#" >我是第四个选项卡的内容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第五个选项卡的内容1</a></li>
   <li> <a href="#" >我是第五个选项卡的内容2</a></li>
   <li> <a href="#" >我是第五个选项卡的内容3</a></li>
   <li> <a href="#" >我是第五个选项卡的内容4</a></li>
  </ul>
  </div>
 </div>
 </div>
</body>

HTML代码分解 ----头部

头部由一个包含了5个 li 标签的列表构成，每个 li 标签中都包含一个 a 标签

这里的selected选择器的作用是 改变选中的li的背景颜色

<div id="header">
  <ul>
  <li class="selected">
   <a href="#" >1</a>
  </li>
  <li>
   <a href="#" >2</a>
  </li>
  <li>
   <a href="#" >3</a>
  </li>
  <li>
   <a href="#" >4</a>
  </li>
  <li>
   <a href="#" >5</a>
  </li>
 </ul>
</div>

HTML代码分解 ----内容

在这里每一个含有dom选择器的div依次代表的是每一个选项卡的内容

.dom选择器中设置display:none;，使每一个选项卡内容隐藏

而对展现的内容另外加一个style=“display: block”; 的属性,使其展现在浏览器上

<div id="content">
  <div class="dom" style="display: block">
  <ul>
   <li> <a href="#" >我是第一个选项卡的内容1</a></li>
   <li> <a href="#" >我是第一个选项卡的内容2</a></li>
   <li> <a href="#" >我是第一个选项卡的内容3</a></li>
   <li> <a href="#" >我是第一个选项卡的内容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第二个选项卡的内容1</a></li>
   <li> <a href="#" >我是第二个选项卡的内容2</a></li>
   <li> <a href="#" >我是第二个选项卡的内容3</a></li>
   <li> <a href="#" >我是第二个选项卡的内容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第三个选项卡的内容1</a></li>
   <li> <a href="#" >我是第三个选项卡的内容2</a></li>
   <li> <a href="#" >我是第三个选项卡的内容3</a></li>
   <li> <a href="#" >我是第三个选项卡的内容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第四个选项卡的内容1</a></li>
   <li> <a href="#" >我是第四个选项卡的内容2</a></li>
   <li> <a href="#" >我是第四个选项卡的内容3</a></li>
   <li> <a href="#" >我是第四个选项卡的内容4</a></li>
  </ul>
  </div>
  <div class="dom">
  <ul>
   <li> <a href="#" >我是第五个选项卡的内容1</a></li>
   <li> <a href="#" >我是第五个选项卡的内容2</a></li>
   <li> <a href="#" >我是第五个选项卡的内容3</a></li>
   <li> <a href="#" >我是第五个选项卡的内容4</a></li>
  </ul>
  </div>
</div>

CSS样式

css代码就不做详细的说明了

<style>
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 text-decoration: none;
 list-style: none;
 }
 a {
 display: inline-block;
 color: black;
 float: left;
 text-align: center;
 }
 #table {
 width: 500px;
 height: 170px;
 margin: 0 auto;
 margin-top: 50px;
 border: 1px solid #e0e0e0;
 }
 /* 头部样式 */
 #table #header {
 width: 100%;
 height: 50px;
 }
 #table #header a {
 width: 20%;
 line-height: 50px;
 background-color: #e0e0e0;
 }
 #table #header a:hover {
 color: red;
 }
 #table #header .selected a{
 background-color:whitesmoke;
 }

 /* 内容样式 */
 #table #content {
 width: 100%;
 height: 120px;
 }
 #table #content .dom {
 margin-top: 10px;
 display: none;
 }
 #table #content .dom a{
 width: 50%; 
 padding: 10px 0;
 }

JS实现代码一

JS代码需要实现的是：每点击一个选项卡数字，显示出相应的选项卡内容
并且头部样式作相应的改变

全部JS代码显示

<script>
 window.onload = function(){
 // 获取元素
 var header = document.getElementById('header');
 var hLi = header.getElementsByTagName('li');
 var dom = document.getElementsByClassName('dom');
 // console.log(dom);
 
 // 遍历hLi中所有的li标签
 for (let index = 0; index < hLi.length; index++) {
  //获取单个li标签
  let li = hLi[index];

  //监听li标签点击事件并改变content中的内容
  li.addEventListener('click',function(){
  //改变点击li的样式
  li.setAttribute('class','selected');
  //消去原来li的样式 并将class设置为null
  for (let j = 0; j < hLi.length; j++) { 
   if( j != index && hLi[j].getAttribute('class') == 'selected'){
   hLi[j].setAttribute('class','null'); 
   break;
   } 
  }
  //改变content中的显示内容
  //遍历每一个dom k是dom的下标
  for (let k = 0; k< hLi.length; k++) {
   if(index === k)
   dom[k].style.display = 'block';
   else
   dom[k].style.display = 'none';
  } 
  });
 
 }
 
 }
</script>

JS代码分解 ----头部样式改变

对每一个li标签添加点击监听器，将点击的li标签的class属性置为selected，使其展现在浏览器上。

再使用一个for循环遍历每一个li标签的class属性的值，若该属性值===‘selected'并且不是刚刚点击的li标签，则把该标签的class属性值改为*‘null'*

//获取单个li标签
  let li = hLi[index];

  //监听li标签点击事件并改变content中的内容
  li.addEventListener('click',function(){
  //改变点击li的样式
  li.setAttribute('class','selected');
  //消去原来li的样式 并将class设置为null
  for (let j = 0; j < hLi.length; j++) { 
   if( j != index && hLi[j].getAttribute('class') == 'selected'){
   hLi[j].setAttribute('class','null'); 
   break;
   } 
  }

JS代码分解 ----内容改变

用一个for语句遍历每一个dom，如果该dom的下标与点击的 li 标签的下标一样，则将该dom的display置为block，否则置为none

//改变content中的显示内容
  //遍历每一个dom k是dom的下标
  for (let k = 0; k< hLi.length; k++) {
   if(index === k)
   dom[k].style.display = 'block';
   else
   dom[k].style.display = 'none';
  }

JS实现代码二

代码一还是有点复杂了，这里有一个更简单的方法。就不作过多解释
重要部分和理解都在注释中提到了

window.onload = function(){
 // 获取元素
 var header = document.getElementById('header');
 var hLi = $('header').getElementsByTagName('li');
 var dom = $('content').getElementsByClassName('dom');

 for (let index = 0; index < hLi.length; index++) {
  let li = hLi[index];
  //监听点击事件
  li.addEventListener('click',function(){
  //清除同级别的选中样式类
  for (let j = 0; j< hLi.length; j++) {
   hLi[j].className = ''; //将class属性置为空 
   dom[j].style.display = 'none'; //将所有内容隐藏
  }

  this.className = 'selected'; //设置当前li标签选中类
  dom[index].style.display = 'block'; //选定li标签显示内容
  });
  
 }

 //封装
 function $(id) {
  return typeof id === 'string'? document.getElementById(id) : null;  
 }
}

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

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

用JS实现选项卡

- Author -

前端coder

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
java script编程起步（第三课）
Jan 10 Javascript
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
Javascript remove 自定义数组删除方法
Oct 20 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
Feb 07 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
对于Javascript 执行上下文的全面了解
Sep 05 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 #Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 #Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 #Javascript
详解webpack-dev-middleware 源码解读
Mar 23 #Javascript
vscode调试node.js的实现方法
Mar 22 #Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 #Javascript
Vue-cli3多页面配置详解
Mar 22 #Javascript
防火墙(2) 3389(1) Ubuntu Server(6) FTP(9) Repository接口(3) 线程池(1) DHCP(2) systemctl(1) Spring Data JPA(4) 域控制器(1)
You might like
一个简单的PHP入门源程序
2006/10/09 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
PHP7 弃用功能
2021/03/09 PHP
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
js/jquery遍历对象和数组的方法分析【forEach，map与each方法】
2019/02/27 jQuery
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python实现视频分帧效果
2019/05/31 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
Pytorch之parameters的使用
2019/12/31 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
纯css3实现图片翻牌特效
2015/03/10 HTML / CSS
美国高档帽子网上商店：Hats.com
2018/08/09 全球购物
亚洲领先的旅游体验市场：Voyagin
2019/11/23 全球购物
城建学院毕业生自荐信
2014/01/31 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
经典团队口号大全
2014/06/21 职场文书
2015年度物流工作总结
2015/04/30 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技