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

js实现选项卡内容切换以及折叠和展开效果【推荐】

Posted in Javascript onJanuary 08, 2017

1.选项卡效果预览

js实现选项卡内容切换以及折叠和展开效果【推荐】

2.源码与简要说明

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>切换选项卡功能实现</title>
  <link rel="stylesheet" href="css/switchTab.css" />
 </head>
 <body>
  <div class="nav-tab">
   <ul class="main-tab" id="nav-tab">
    <li class="active" index="0">
     <a href="#none"><p>星期一</p><p>11-07</p></a>
    </li>
    <li index="1"><a href="#none"><p>星期二</p><p>11-08</p></a></li>
    <li index="2"><a href="#none"><p>星期三</p><p>11-09</p></a></li>
    <li index="3"><a href="#none"><p>星期四</p><p>11-10</p></a></li>
    <li index="4"><a href="#none"><p>星期五</p><p>11-11</p></a></li>
    <li index="5"><a href="#none"><p>星期六</p><p>11-12</p></a></li>
    <li index="6"><a href="#none"><p>星期日</p><p>11-13</p></a></a></li>
   </ul>
  </div>
  <div class="tab-content">
   <div class="table-div" style="display: block;" tab-index="0">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <colgroup>
       <col align="left" width="40%"/>
       <col align="left" width="30%"/>
       <col align="right" width="30%"/>
     </colgroup>
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>广东卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>甘肃卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table> 
   </div>
   <div class="table-div" style="display: none;" tab-index="0">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <colgroup>
       <col align="left" width="40%"/>
       <col align="left" width="30%"/>
       <col align="right" width="30%"/>
     </colgroup>
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>广东卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>甘肃卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table> 
   </div>
   <div class="table-div" style="display: none;" tab-index="0">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <colgroup>
       <col align="left" width="40%"/>
       <col align="left" width="30%"/>
       <col align="right" width="30%"/>
     </colgroup>
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>广东卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>甘肃卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
       <tr>
       <td>安徽卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>广东卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
      <tr class="last-no-border">
       <td>甘肃卫视</td>
       <td>2016/11/07</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table>
   </div>
   <div class="table-div" style="display: none;" tab-index="1">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/08</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/08</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table> 
   </div>
   <div class="table-div" style="display: none;" tab-index="2">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/09</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/09</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table> 
   </div>
   <div class="table-div" style="display: none;" tab-index="3">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/10</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/10</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table> 
   </div>
   <div class="table-div" style="display: none;" tab-index="4">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/11</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/11</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table> 
   </div>
   <div class="table-div" style="display: none;" tab-index="5">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/12</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/12</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table> 
   </div>
   <div class="table-div" style="display: none;" tab-index="5">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/12</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/12</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table> 
   </div>
   <div class="table-div" style="display: none;" tab-index="6">
    <table cellpadding="0" cellspacing="0" border="0" class="table">
     <thead>
      <tr>
       <td>播出频道</td>
       <td>时间</td>
       <td>节目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽卫视</td>
       <td>2016/11/13</td>
       <td>天气预报</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/13</td>
       <td>天气预报</td>
      </tr>
     </tbody>
    </table> 
   </div>
   <div class="div-buttn btn-show" button-index="0">
    显示全部<i class="c-icon c-icon-bottom"></i>
   </div> 
   <div class="div-buttn btn-collapse" style="display: none;" button-index="0">
    折叠<i class="c-icon c-icon-top"></i>
   </div> 
  </div>
  
  <script type="text/javascript" src="./js/lib/jquery-3.1.1.min.js"></script>
  <!--时间：2016-11-09 作者：zhangjiangfeng 描述：选项卡jQuery版本实现 -->
  <!--<script type="text/javascript" src="js/switchTab-jQuery.js" ></script>
  <!--时间：2016-11-12 作者：zhangjiangfeng 描述：选项卡原生js版本实现 -->
  <script type="text/javascript" src="js/switchTab-javaScript.js" ></script>
 </body>
</html>

switchTab.css 选项卡样式小技巧简要说明

对于选项卡未选中时利用边框透明border-color: rgba(0,0,0,0);；选中后边框顶部颜色border-top-color显示，

这一技巧从而减少其选项卡盒子模型的计算

/**
 * Author Zhangjiangfeng
 * Date 2016/11/9 PM 20:35 night
 * 选项卡样式实现
 */
html {
 font-family: "微软雅黑";
 font-size: 12px;
}
div, ul, li, p, a {
 margin: 0;
 padding: 0;
}
.nav-tab {
 width: 565px;
 height: 54px;
 background-color: #fafafa;
 position: relative;
 display: inline-block;
}
ul.main-tab {
 list-style: none;
 margin: 0;
 padding: 0;
 height: 100%;
 font-size: 0; /*消除display: inline-block间隙*/
 border-bottom: 1px solid #d9d9d9;
 margin-bottom: -2px;
}
ul.main-tab li {
 display: inline-block;
 height: 48px;
 padding-top: 4px;
 border-width: 2px 1px 0;
 border-color: #999;
 border-style: solid;
 border-color: rgba(0,0,0,0);
 _border-color:tomato;
 _filter:chroma(color=#ff6347);
}
ul.main-tab li a {
 display: inline-block;
 height: 100%;
 text-decoration: none;
 color: #333;
}

ul.main-tab li p {
 font-size: 12px;
 line-height: 20px;
 padding: 0 20px;
}
/*利用边框的透明从而减少li盒子计算样式*/
ul.main-tab li {
 border-width: 2px 1px 0;
 border-top-color: #19A6A6;
 border-left-color: #d9d9d9;
 border-right-color: #d9d9d9;
 border-style: solid;
 border-color: rgba(0,0,0,0);
}
/* ul.main-tab li:hover {
  border-width: 2px 1px 0;
  border-top-color: #19A6A6;
  border-left-color: #d9d9d9;
  border-right-color: #d9d9d9;
  border-bottom: #FFFFFF;
  border-style: solid;
  background-color: #FFFFFF;
 }*/
/*选项卡选中样式*/
ul.main-tab li.active {
 border-width: 2px 1px 0;
 border-top-color: #19A6A6;
 border-left-color: #d9d9d9;
 border-right-color: #d9d9d9;
 border-bottom: #FFFFFF;
 border-style: solid;
 background-color: #FFFFFF;
}

/*选项卡内容样式*/
.tab-content {
 width: 543px;
 min-height: 250px;
 border: 1px solid #d9d9d9;
 border-top: none;
 padding: 10px;
 position: relative;
}
.table {
 width: 100%;
 display: table;
 border-collapse: collapse;
 border: 0;
}
.table tr td {
 padding: 10px;
 border-bottom: solid 1px #d9d9d9;
}
.table tr.last-no-border td {
 border-bottom: none;
}
.div-buttn {
 width: 100%;
 height: 30px;
 cursor: pointer;
 line-height: 30px;
 text-align: center;
 background-color: #fafafa;
}
.div-buttn i {
 width: 14px;
 height: 14px;
 margin-left: 5px;
 display: inline-block; 
 vertical-align: text-bottom;
 font-style: normal;
}
.div-buttn i.c-icon {
 background: url(../img/icons.png) no-repeat 0 0;
}
.div-buttn i.c-icon-bottom {
 background-position: -71px -168px;
}
.div-buttn i.c-icon-top {
 background-position:-96px -168px
}
.close {
 display: none;
}

switchTab-jQuery/switchTab-javaScript思路简要说明

a.切换不同选项卡显示对应内容

b.点击折叠/展开按钮时，操作的是哪一选项卡对应的内容

3.switchTab-jQuery.js动态效果实现

/*选项卡切换功能借助jQuery实现*/
$(function(){
 var $navTab = $("#nav-tab"); //选项卡对象
 var $tabCont = $(".tab-content"); //选项卡内容
 var $tabContList = $tabCont.find(".table-div"); //选项卡内容列表
 var $btnShow = $(".btn-show"); //显示全部
 var $btnCollapse = $(".btn-collapse"); //折叠
 //选项卡事件绑定
 $navTab.on("click", "li", function(){
  var $that = $(this);
  //获取当前索引值
  var navIndex = $that.attr("index"); 
  //当前点击li添加active类，同级兄弟节点移除active类
  $that.addClass("active").siblings().removeClass("active"); 
  //当当前点击选项卡navIndex值与表格列表索引tabIndex值相等时显示，否则隐藏
  $tabContList.each(function(i){
   var $that = $(this);
   var tabIndex = $that.attr("tab-index"); //表格列表索引
   if(navIndex===tabIndex){
    $that.show();
   }else{
    $that.hide();
   }
  })
  //设置显示全部与折叠按钮索引值---标识当前选中选项卡
  $btnShow.attr("button-index",navIndex);
  $btnCollapse.attr("button-index", navIndex);
 });
 //显示全部
 $btnShow.on("click", function(){
  var $that = $(this);
  var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值
  $that.hide();
  $btnCollapse.show();
  $tabContList.each(function(i){
   var $that = $(this);
   var tabIndex = $that.attr("tab-index"); //表格列表索引
   if(btnIndex===tabIndex){
    $that.show();
   }
  })
 })
 //折叠
 $btnCollapse.on("click", function(){
  var $that = $(this);
  var btnIndex = $that.attr("button-index"); //获取当前按钮的索引值
  $that.hide();
  $btnShow.show();
  $tabContList.each(function(i){
   var $that = $(this);
   var tabIndex = $that.attr("tab-index"); //表格列表索引
   if(btnIndex===tabIndex){
    $that.hide();
   }
  })
 });
})

3.switchTab-javaScript效果实现

/*选项卡切换功能js实现*/
window.onload = function(){
 var oTab = document.getElementById("nav-tab");
 var liArray = oTab.getElementsByTagName("li");
 var tabList = document.getElementsByClassName("table-div"); 
 var btnShow = document.getElementsByClassName("btn-show");
 var btnCollapse = document.getElementsByClassName("btn-collapse");
 for (var i=0; i<liArray.length; i++) {
  liArray[i].onclick = function(){
   for (var j=0; j<liArray.length; j++) {
    //移除class样式
    liArray[j].className = "";
   }
   //添加class样式
   this.className = "active";
   //获取DOM索引值
   var index = this.getAttribute("index");
   btnShow[0].setAttribute("button-index", index);
   btnCollapse[0].setAttribute("button-index", index);
   //内容切换
   for (var t = 0; t<tabList.length; t++) {
    var tableIndex = tabList[t].getAttribute("tab-index");
    if(index === tableIndex){
     tabList[t].style.display = "block";
    }else{
     tabList[t].style.display = "none";
    }
   }
  }
 }
 //显示全部
 btnShow[0].onclick = function(){
  var btnIndex = this.getAttribute("button-index");
  //表格index与按钮btnIndex
  for (var t = 0; t<tabList.length; t++) {
   var tableIndex = tabList[t].getAttribute("tab-index");
   if(btnIndex === tableIndex){
    tabList[t].style.display = "block";
   }
  }
  this.style.display = "none";
  btnCollapse[0].style.display = "block";
 }
 //折叠
 btnCollapse[0].onclick = function(){
  var btnIndex = this.getAttribute("button-index");
  //表格index与按钮btnIndex
  for (var t = 0; t<tabList.length; t++) {
   var tableIndex = tabList[t].getAttribute("tab-index");
   if(btnIndex === tableIndex){
    tabList[t].style.display = "none";
   }
  }
  this.style.display = "none";
  btnShow[0].style.display = "block";
 } 
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持三水点靠木！

js实现选项卡内容切换以及折叠和展开效果【推荐】

- Author -

Avenstar

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

Javascript 相关文章推荐
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
javascript面向对象创建对象的方式小结
Jul 29 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
关于element的表单组件整理笔记
Feb 05 Javascript
JavaScript分页组件使用方法详解
Jul 26 Javascript
Javascript 实现计算器时间功能详解及实例（二）
Jan 08 #Javascript
JS 实现计算器详解及实例代码（一）
Jan 08 #Javascript
详解百度百科目录导航树小插件
Jan 08 #Javascript
Three.js基础部分学习
Jan 08 #Javascript
Javascript 高性能之递归，迭代，查表法详解及实例
Jan 08 #Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 #Javascript
jQuery实现滚动条滚动到子元素位置（方便定位）
Jan 08 #Javascript
AngularJS(2) explain(2) 波段(1) 文书(291) 观后感(479) 城市猎人(1) 西索(1) 实用文书(952) 申请书(21) HAM-2000(1)
You might like
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
javascript高亮效果的二种实现方法
2008/09/14 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
python中实现字符串翻转的方法
2018/07/11 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
薇诺娜官方网上商城：专注敏感肌肤
2017/05/25 全球购物
单位人事专员介绍信
2014/01/11 职场文书
会计求职信
2014/05/29 职场文书
新文化运动的口号
2014/06/21 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
检讨书之工作不认真
2019/08/14 职场文书
《最后一头战象》读后感：动物也有感情
2020/01/02 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript