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;");
}
}
});