欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開效果【推薦】

 更新時(shí)間：2017年01月08日 15:53:05   作者：Avenstar  
本文主要介紹了js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及文字折疊和展開效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧

1.選項(xiàng)卡效果預(yù)覽

2.源碼與簡(jiǎn)要說明

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>切換選項(xiàng)卡功能實(shí)現(xiàn)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>廣東衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>甘肅衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>廣東衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>甘肅衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>廣東衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>甘肅衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
       <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>廣東衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr class="last-no-border">
       <td>甘肅衛(wèi)視</td>
       <td>2016/11/07</td>
       <td>天氣預(yù)報(bào)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/08</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/08</td>
       <td>天氣預(yù)報(bào)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/09</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/09</td>
       <td>天氣預(yù)報(bào)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/10</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/10</td>
       <td>天氣預(yù)報(bào)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/11</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/11</td>
       <td>天氣預(yù)報(bào)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/12</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/12</td>
       <td>天氣預(yù)報(bào)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/12</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/12</td>
       <td>天氣預(yù)報(bào)</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>時(shí)間</td>
       <td>節(jié)目</td>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>安徽衛(wèi)視</td>
       <td>2016/11/13</td>
       <td>天氣預(yù)報(bào)</td>
      </tr>
      <tr>
       <td>CCTV</td>
       <td>2016/11/13</td>
       <td>天氣預(yù)報(bào)</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>
  <!--時(shí)間：2016-11-09 作者：zhangjiangfeng 描述：選項(xiàng)卡jQuery版本實(shí)現(xiàn) -->
  <!--<script type="text/javascript" src="js/switchTab-jQuery.js" ></script>
  <!--時(shí)間：2016-11-12 作者：zhangjiangfeng 描述：選項(xiàng)卡原生js版本實(shí)現(xiàn) -->
  <script type="text/javascript" src="js/switchTab-javaScript.js" ></script>
 </body>
</html>

switchTab.css 選項(xiàng)卡樣式小技巧簡(jiǎn)要說明

對(duì)于選項(xiàng)卡未選中時(shí)利用邊框透明border-color: rgba(0,0,0,0);；選中后邊框頂部顏色border-top-color顯示，

這一技巧從而減少其選項(xiàng)卡盒子模型的計(jì)算

/**
 * Author Zhangjiangfeng
 * Date 2016/11/9 PM 20:35 night
 * 選項(xiàng)卡樣式實(shí)現(xiàn)
 */
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盒子計(jì)算樣式*/
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;
 }*/
/*選項(xiàng)卡選中樣式*/
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;
}

/*選項(xiàng)卡內(nèi)容樣式*/
.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思路簡(jiǎn)要說明

　　a.切換不同選項(xiàng)卡顯示對(duì)應(yīng)內(nèi)容

　　b.點(diǎn)擊折疊/展開按鈕時(shí)，操作的是哪一選項(xiàng)卡對(duì)應(yīng)的內(nèi)容

3.switchTab-jQuery.js動(dòng)態(tài)效果實(shí)現(xiàn)

/*選項(xiàng)卡切換功能借助jQuery實(shí)現(xiàn)*/
$(function(){
 var $navTab = $("#nav-tab"); //選項(xiàng)卡對(duì)象
 var $tabCont = $(".tab-content"); //選項(xiàng)卡內(nèi)容
 var $tabContList = $tabCont.find(".table-div"); //選項(xiàng)卡內(nèi)容列表
 var $btnShow = $(".btn-show"); //顯示全部
 var $btnCollapse = $(".btn-collapse"); //折疊
 //選項(xiàng)卡事件綁定
 $navTab.on("click", "li", function(){
  var $that = $(this);
  //獲取當(dāng)前索引值
  var navIndex = $that.attr("index"); 
  //當(dāng)前點(diǎn)擊li添加active類，同級(jí)兄弟節(jié)點(diǎn)移除active類
  $that.addClass("active").siblings().removeClass("active"); 
  //當(dāng)當(dāng)前點(diǎn)擊選項(xiàng)卡navIndex值與表格列表索引tabIndex值相等時(shí)顯示，否則隱藏
  $tabContList.each(function(i){
   var $that = $(this);
   var tabIndex = $that.attr("tab-index"); //表格列表索引
   if(navIndex===tabIndex){
    $that.show();
   }else{
    $that.hide();
   }
  })
  //設(shè)置顯示全部與折疊按鈕索引值---標(biāo)識(shí)當(dāng)前選中選項(xiàng)卡
  $btnShow.attr("button-index",navIndex);
  $btnCollapse.attr("button-index", navIndex);
 });
 //顯示全部
 $btnShow.on("click", function(){
  var $that = $(this);
  var btnIndex = $that.attr("button-index"); //獲取當(dāng)前按鈕的索引值
  $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"); //獲取當(dāng)前按鈕的索引值
  $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效果實(shí)現(xiàn)

/*選項(xiàng)卡切換功能js實(shí)現(xiàn)*/
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);
   //內(nèi)容切換
   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";
 } 
}

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

相關(guān)文章

最新評(píng)論