富贵资源网

js实现选项卡内容切换以及折叠和展开效果【推荐】
站长资源 2024/11/13 佚名
48 1538
富贵资源网 Design By www.hznty.com

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="/UploadFiles/2021-04-02/jquery-3.1.1.min.js">


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";
 } 
}





以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
www.hznty.com 富贵资源网
20,135影音资源
44,641技术资源
2,817软件资源
435,032站长资源

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
富贵资源网 Design By www.hznty.com