js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及折疊和展開(kāi)效果【推薦】
更新時(shí)間：2017年01月08日 15:53:05 作者：Avenstar
本文主要介紹了js實(shí)現(xiàn)選項(xiàng)卡內(nèi)容切換以及文字折疊和展開(kāi)效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
1.選項(xiàng)卡效果預(yù)覽
2.源碼與簡(jiǎn)要說(shuō)明
<!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)要說(shuō)明
對(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)要說(shuō)明
a.切換不同選項(xiàng)卡顯示對(duì)應(yīng)內(nèi)容
b.點(diǎn)擊折疊/展開(kāi)按鈕時(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類(lèi)，同級(jí)兄弟節(jié)點(diǎn)移除active類(lèi)
$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í)也希望多多支持腳本之家！
您可能感興趣的文章:
- JS+CSS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)多級(jí)菜單效果
- js實(shí)現(xiàn)可折疊展開(kāi)的手風(fēng)琴菜單效果
- Js操作樹(shù)節(jié)點(diǎn)自動(dòng)折疊展開(kāi)的幾種方法
- js實(shí)現(xiàn)簡(jiǎn)單折疊、展開(kāi)菜單的方法
- js實(shí)現(xiàn)超簡(jiǎn)單的展開(kāi)、折疊目錄代碼
- JS實(shí)現(xiàn)鼠標(biāo)滑過(guò)折疊與展開(kāi)菜單效果代碼
- JS實(shí)現(xiàn)可展開(kāi)折疊層的鼠標(biāo)拖曳效果
- JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開(kāi)效果實(shí)例
- JS實(shí)現(xiàn)適合于后臺(tái)使用的動(dòng)畫(huà)折疊菜單效果
- JS實(shí)現(xiàn)的簡(jiǎn)單折疊展開(kāi)動(dòng)畫(huà)效果示例
相關(guān)文章
React?diff算法面試考點(diǎn)超詳細(xì)講解
渲染真實(shí)DOM的開(kāi)銷(xiāo)很大，有時(shí)候我們修改了某個(gè)數(shù)據(jù)，直接渲染到真實(shí)dom上會(huì)引起整個(gè)dom樹(shù)的重繪和重排。我們希望只更新我們修改的那一小塊dom，而不是整個(gè)dom，diff算法就幫我們實(shí)現(xiàn)了這點(diǎn)。diff算法的本質(zhì)就是：找出兩個(gè)對(duì)象之間的差異，目的是盡可能做到節(jié)點(diǎn)復(fù)用2022-12-12
Openlayers實(shí)現(xiàn)測(cè)量功能
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)測(cè)量功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JS 實(shí)現(xiàn)倒計(jì)時(shí)數(shù)字時(shí)鐘效果【附實(shí)例代碼】
下面小編就為大家?guī)?lái)一篇JS 實(shí)現(xiàn)倒計(jì)時(shí)數(shù)字時(shí)鐘效果【附實(shí)例代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做一個(gè)參考。2016-03-03
重學(xué)JS之顯示強(qiáng)制類(lèi)型轉(zhuǎn)換詳解
這篇文章主要給大家介紹了關(guān)于重學(xué)JS之顯示強(qiáng)制類(lèi)型轉(zhuǎn)換的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
button沒(méi)寫(xiě)type=button會(huì)導(dǎo)致點(diǎn)擊時(shí)提交
點(diǎn)擊了一個(gè)彈窗中的按鈕，想到彈窗消失了，經(jīng)測(cè)試后發(fā)現(xiàn)button 沒(méi)寫(xiě)type=button會(huì)導(dǎo)致點(diǎn)擊時(shí)提交2014-03-03![[Bootstrap-插件使用]Jcrop+fileinput組合實(shí)現(xiàn)頭像上傳功能實(shí)例代碼](http://img.jbzj.com/images/xgimg/bcimg5.png)
[Bootstrap-插件使用]Jcrop+fileinput組合實(shí)現(xiàn)頭像上傳功能實(shí)例代碼
這篇文章主要介紹了[Bootstrap-插件使用]Jcrop+fileinput組合實(shí)現(xiàn)頭像上傳功能實(shí)例代碼,非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-12
javascript sudoku 數(shù)獨(dú)智力游戲生成代碼
javascript sudoku 數(shù)獨(dú)智力游戲生成代碼，喜歡的朋友可以參考下。2010-03-03
avaScript?提供了一些方法來(lái)操作?Cookie,包括設(shè)置、獲取、刪除?Cookie?等,本文將詳細(xì)介紹如何使用JavaScript操作Cookie,需要的可以參考下2024-12-12
Immutable 在 JavaScript 中的應(yīng)用
在 JavaScript 中，對(duì)象是引用類(lèi)型的數(shù)據(jù)，其優(yōu)點(diǎn)在于頻繁的修改對(duì)象時(shí)都是在原對(duì)象的基礎(chǔ)上修改，并不需要重新創(chuàng)建，這樣可以有效的利用內(nèi)存，不會(huì)造成內(nèi)存空間的浪費(fèi)，對(duì)象的這種特性可以稱(chēng)之為 Mutable，中文的字面意思是「可變」2016-05-05
ES6(ECMAScript 6)新特性之模板字符串用法分析
這篇文章主要介紹了ES6(ECMAScript 6)新特性之模板字符串用法,簡(jiǎn)單介紹了ES6模板字符串的概念、功能并結(jié)合實(shí)例形式分析了ES6模板字符串的用法,需要的朋友可以參考下2017-04-04