首页
所有分类
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+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
详解Vue中使用插槽（slot）、聚类插槽
Apr 12 Javascript
JavaScript制作3D旋转相册
Aug 02 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
电台频率(32) 短波(8) 长波(3) 下载(1) 广播(8) 收音机(62) 保养(1) 无线电(12) 怀旧期刊(1) Harman Kardon(1)
You might like
php 分页类 扩展代码
2009/06/11 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
JavaScript简单实现弹出拖拽窗口（一）
2016/06/17 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
[09:37]2018DOTA2国际邀请赛寻真——不懈追梦的Team Serenity
2018/08/13 DOTA
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Tornado 多进程实现分析详解
2018/01/12 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python 代码运行时间获取方式详解
2020/09/18 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
会计岗位职责
2013/11/08 职场文书
爽歪歪广告词
2014/03/20 职场文书
银行内勤岗位职责
2014/04/09 职场文书
团队口号大全
2014/06/06 职场文书
科技节口号
2014/06/19 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
党员剖析材料范文
2014/12/18 职场文书
倡议书范文大全
2015/04/28 职场文书
行政处罚听证告知书
2015/07/01 职场文书
公司员工离职感言
2015/08/03 职场文书
小学数学教师研修日志
2015/11/13 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python