js实现选项卡内容切换以及折叠和展开效果【推荐】
1.选项卡效果预览
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";
}
}
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
JavaScript控制网页层收起和展开效果的方法
本文实例讲述了JavaScript控制网页层收起和展开效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <meta http-equiv="pragma" content=&q
-
自己写了一个展开和收起的多更能型的js效果
先来看看效果: 具体的功能是: 1.页面上面最多只有一个是显示全部内容的. 2.当自己处于全部显示的时候,点击自己的收起,自己收起. 3.当自己处于全部显示的时候,点击其他的展开是,自己内容隐藏,原来的"收起"变为"展开" 而被点击的选项则内容全部显示,"展开"变为"收起" ================================================= 部分代码: =====================
-
慢慢展开再慢慢收起的javascript广告效果
我们 效果代码 *{margin:0;padding:0;} body {height:2000px;} #menu { width:220px; height:420px; position:absolute; z-index:1000; background:url(/upload/20080421090108362.gif) repeat-x top left; } #menu_h { float:right; } #menu_h img { cursor:pointer; } #menu
-
js实现简单折叠、展开菜单的方法
本文实例讲述了js实现简单折叠.展开菜单的方法.分享给大家供大家参考.具体如下: 这里介绍的是意乱会折叠.展开的菜单导航栏,很老时候写的,CSS没有做美化,如果想用的朋友就自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-hidden-show-menu-codes/ 具体代码如下: <html> <script> function show(c_Str) {if(document.all(c_Str
-
JavaScript实现兼容IE6的收起折叠与展开效果实例
本文实例讲述了JavaScript实现兼容IE6的收起折叠与展开效果.分享给大家供大家参考,具体如下: 收起折叠效果本身不难,但是div是否超出高度不应该利用innerHTML去判断,收起折叠的时候把所有div的innerHTML搞到一个变量又把一个变量的内容通过截取字符串的方式,又将其放到div.下面提供一种通过div本身固有的高度来判断div是否过高,如果过高则提供折叠收起的按钮. div的高度通过document.getElementById("div的id").offsetHe
-
原生js实现新闻列表展开/收起全文功能
知识要点 1.实现原理很简单,通过点击a标签设置div的display属性隐藏或者显示, 主要是对dom操作的掌握. 2.需要用到的dom操作: parentNode 获取父级元素 nextSibling获取下一个紧跟的节点 previousSibling获取上一个紧跟的节点 3.注意事项: 要考虑到当点击展开全文的时候,其他已经展开的全文要收起来. 当用nextSibling获取下一个节点时候,不同浏览器的判断是不一样的 有的是获取元素,有的获取换行符或者空格,所以这里就要用到nodeType
-
JS+CSS实现的简单折叠展开多级菜单效果
本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究折叠菜单的朋友们,这一个小例子可能正是你需要的,好好研究一下吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/ 具体代码如
-
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生Js版本, 用同样的思路写了个jQ版本. 时间关系,
-
一个封装js代码-----展开收起效果示例
第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助 js部分: 复制代码 代码如下: var show_obj = function(obj,at,ob){ $(obj).bind('click', function(){ var showTxt = $(this).children(at); //alert($(at).html()); //alert(sObj); //alert(); //alert($(this).parent().chi
-
JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果.本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC
-
JS实现可展开折叠层的鼠标拖曳效果
本文实例讲述了JS实现可展开折叠层的鼠标拖曳效果.分享给大家供大家参考.具体如下: 这是一款简单JS代码实现的鼠标拖曳图层效果,比较精简,大家参考一下.鼠标点击层标题栏可实现层内容的展开与折叠,按住标题栏可实现层的拖动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fade-out-mouse-draw-style-demo/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01