/*选项卡切换功能借助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"; } }