jQuery控制tab标签页

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