首页
所有分类
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 相关文章推荐
javascript类继承机制的原理分析
Sep 12 Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
Vue动态实现评分效果
May 24 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
vue+element ui实现锚点定位
Jun 29 Vue.js
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) 战锤40K(1) 铁拳(1) 吸血鬼(1) 原神(1) 模拟人生(1) 绿林侠盗(1) 大话西游(1) LOL(1) 死亡搁浅(1)
You might like
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
2016/03/09 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
毕业生幼师求职自荐信
2013/10/01 职场文书
资产评估专业学生的自我鉴定
2013/11/14 职场文书
班委竞选演讲稿
2014/04/28 职场文书
雨花台导游词
2015/02/06 职场文书
父母教会我观后感
2015/06/17 职场文书
《小蝌蚪找妈妈》教学反思
2016/02/23 职场文书
Python下opencv库的安装过程及问题汇总
2021/06/11 Python
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers