首页
所有分类
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 相关文章推荐
location.search在客户端获取Url参数的方法
Jun 08 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
拖动时防止选中
Feb 03 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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
大话西游(1) 吸血鬼(1) 模拟人生(1) AGC(1) FS1016(1) 死亡搁浅(1) 原神(1) 铁拳(1) 绿林侠盗(1) 遗弃(1)
You might like
PHP脚本的10个技巧(8)
2006/10/09 PHP
PHP实现网上点歌（二）
2006/10/09 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
2014/01/06 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
[05:53]敌法师的金色冠名ID"BurNIng"，是传说，是荣耀
2020/07/11 DOTA
Python基类函数的重载与调用实例分析
2015/01/12 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python绘制数码晶体管日期
2021/02/19 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
意大利会呼吸的鞋：Geox健乐士
2017/02/12 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
团队会宣传标语
2014/10/09 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书