首页
所有分类
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 相关文章推荐
转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
JavaScript实现的拼图算法分析
Feb 13 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
忘记密码(1) 优化(1) muduo(1) pt-archiver(1) 存储过程(3) B+树(2) ICF-5900W(2) 增删改查(2) instantclient(1) TcpServer(1)
You might like
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
迪菲－赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
百度工程师讲PHP函数的实现原理及性能分析（二）
2015/05/13 PHP
PHP7正式版测试，性能惊艳！
2015/12/08 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
js 数值项目的格式化函数代码
2010/05/14 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
基于vue-cli 路由 实现类似tab切换效果（vue 2.0）
2019/05/08 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
Python实现的概率分布运算操作示例
2017/08/14 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
利用python生成照片墙的示例代码
2020/04/09 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
宝拉珍选澳大利亚官方购物网站：Paula’s Choice澳大利亚
2016/09/13 全球购物
教师专业自荐书范文
2014/02/10 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
MySQL外键约束(Foreign Key)案例详解
2022/06/28 MySQL