首页
所有分类
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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
可以文本显示的公告栏的js代码
Mar 11 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
JS中Location使用详解
May 12 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
Node.js net模块功能及事件监听用法分析
Jan 05 Javascript
js实现无缝轮播图特效
May 09 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
Odoo(1) ftpserver(1) SeaTunnel(1) 批处理(1) Logrotate(1) tkFileDialog(1) 黑名单(1) T-SQL(1) NFS(1) ElementTree(1)
You might like
php设计模式之命令模式使用示例
2014/03/02 PHP
php多任务程序实例解析
2014/07/19 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
PHP实现的62进制转10进制，10进制转62进制函数示例
2019/06/06 PHP
JQuery autocomplete 使用手册
2010/04/01 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
JavaScript运动框架 多物体任意值运动（三）
2017/05/17 Javascript
Vue应用部署到服务器的正确方式
2017/07/15 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
自定义Vue组件打包、发布到npm及使用教程
2019/05/22 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
Python对象转换为json的方法步骤
2019/04/25 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
pandas的resample重采样的使用
2020/04/24 Python
python IDLE添加行号显示教程
2020/04/25 Python
如何在python中判断变量的类型
2020/07/29 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
世界上最大的在线学习和教学市场：Udemy
2017/11/08 全球购物
乌克兰在线药房：Аптека24
2019/10/30 全球购物
Jones Bootmaker官网：优质靴子和鞋子在线
2020/11/30 全球购物
struct与class的区别
2014/02/03 面试题
如何开发一个JQuery插件
2016/07/28 面试题
管理部副部长岗位职责范文
2014/03/09 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Nginx缓存设置案例详解
2021/09/15 Servers