HTML怎么用js展开全部,js实现选项卡内容切换以及折叠和展开效果【推荐】

最新推荐文章于 2023-06-28 13:45:34 发布

转载最新推荐文章于 2023-06-28 13:45:34 发布 · 296 阅读

文章标签：

#HTML怎么用js展开全部

本文介绍了一种使用CSS和JavaScript实现的选项卡效果及其切换功能。通过改变边框颜色来优化选项卡样式，并利用jQuery简化了动态效果的实现。

1.选项卡效果预览

2.源码与简要说明

切换选项卡功能实现

播出频道时间节目

安徽卫视2016/11/07天气预报CCTV2016/11/07天气预报广东卫视2016/11/07天气预报甘肃卫视2016/11/07天气预报

播出频道时间节目

安徽卫视2016/11/07天气预报CCTV2016/11/07天气预报广东卫视2016/11/07天气预报甘肃卫视2016/11/07天气预报

播出频道时间节目

安徽卫视2016/11/07天气预报CCTV2016/11/07天气预报广东卫视2016/11/07天气预报甘肃卫视2016/11/07天气预报安徽卫视2016/11/07天气预报CCTV2016/11/07天气预报广东卫视2016/11/07天气预报甘肃卫视2016/11/07天气预报

播出频道时间节目

安徽卫视2016/11/08天气预报CCTV2016/11/08天气预报

播出频道时间节目

安徽卫视2016/11/09天气预报CCTV2016/11/09天气预报

播出频道时间节目

安徽卫视2016/11/10天气预报CCTV2016/11/10天气预报

播出频道时间节目

安徽卫视2016/11/11天气预报CCTV2016/11/11天气预报

播出频道时间节目

安徽卫视2016/11/12天气预报CCTV2016/11/12天气预报

播出频道时间节目

安徽卫视2016/11/12天气预报CCTV2016/11/12天气预报

播出频道时间节目

安徽卫视2016/11/13天气预报CCTV2016/11/13天气预报

显示全部

折叠

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[i].onclick = function(){

for (var j=0; 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

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

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

var tableIndex = tabList[t].getAttribute("tab-index");

if(btnIndex === tableIndex){

tabList[t].style.display = "none";

}

this.style.display = "none";

btnShow[0].style.display = "block";

}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！