用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选项卡操作方法汇总

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

Javascript 相关文章推荐
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JavaScript学习笔记之JS对象
Jan 22 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
在PHP中实现Javascript的escape()函数代码
2010/08/08 PHP
理解php原理的opcodes(操作码)
2010/10/26 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
基于jQuery的倒计时实现代码
2012/05/30 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
python实现定时发送邮件
2020/12/23 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
学前班教师的自我鉴定
2013/12/05 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书