首页
所有分类
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 相关文章推荐
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 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) 访问日志(2) 事务(5) 缓存(3) 内存(1) PV(1) 线程(1) 连接数(1) 策略(1) ipv6(1)
You might like
用Flash图形化数据(一)
2006/10/09 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
用javascript实现改变TEXTAREA滚动条和按钮的颜色，以及怎样让滚动条变得扁平
2007/04/20 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
jquery append()方法与html()方法的区别及使用介绍
2014/08/01 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
浅谈css3中的渐进增强和优雅降级
2017/12/01 HTML / CSS
Spartoo比利时：欧洲时尚购物网站
2017/12/06 全球购物
俄罗斯名牌服装网上商店：UNIQUE FABRIC
2019/07/25 全球购物
易程科技软件测试笔试
2013/03/24 面试题
建筑实习自我鉴定
2013/10/18 职场文书
年会主持人开场白台词
2015/05/29 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
什么是检讨书？检讨书的格式及范文
2019/11/05 职场文书
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python