Tab標簽
多個tab標簽，選中狀態通過JS修改class
先設置所有tabButtonStyle的class為tabButtonStyle，在給當前按鈕添加激活樣式

// tab激活 $('.tabButtonStyle').click(function () {var elems = document.getElementsByClassName("tabButtonStyle");for (var i = 0; i < elems.length; i++) {elems[i].setAttribute("class", "tabButtonStyle");}$(this).addClass("tabButtonActive"); });

Tab標簽的內容，可以展開收起
直接控制頁面元素顯示與隱藏，沒有動態效果
頁面代碼

<button class="flexibleStyle"><a class="flexibleControleStyle">展開</a><i id="searchIconStyle" class="icon-circle-arrow-up"></i> </button>

JS代碼

// 展開、收起 $('.flexibleStyle').click(function () {var text = document.getElementsByClassName("flexibleStyle")[0].children[0].text;if (text == "展開") {document.getElementsByClassName("flexibleStyle")[0].children[0].innerHTML = '收起';$(".icon-circle-arrow-up").attr("class", "icon-circle-arrow-down");$(".searchContentStyle").attr("style", "display:none;");} else {document.getElementsByClassName("flexibleStyle")[0].children[0].innerHTML = '展開';$(".icon-circle-arrow-down").attr("class", "icon-circle-arrow-up");$(".searchContentStyle").attr("style", "display:block;");}} });

總結

以上是生活随笔為你收集整理的jQuery控制tab标签页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。