自己用js写的一个tab卡

整体思想：元素上加onclick（）监听，js设置div的style来控制显示与否

<div class="tabbable" id="tabs-717074">
                    <ul class="nav nav-tabs">
                        <li id="li1" onclick="changecss(1)" class="active">
                            <a href="#">接收的调解</a>
                        </li>
                        <li id="li2"  onclick="changecss(2)">
                            <a href="#">发起的调解</a>
                        </li>
                    </ul>
                    <%--发出的调解--%>
                    <div id="content1" class="tab-content" style="display: none">

                            <c:forEach items="${interactionmediates2}" var="interactionmediate" >
                                <div class="tab-pane active" id="1" style="margin-top: 20px;border: 1px solid silver;height: 150px">
                                    <div style="float: left ;width: 80%">
                                        <div style="margin-top: 20px">
                                            <div style="margin-left: 20px;">被邀请者姓名：${interactionmediate.namet}   
                                                被邀请者电话：${interactionmediate.mobilet}</div>
                                        </div>
                                        <div style="word-wrap:break-word;margin-top: 20px;margin-left: 20px">
                                            调解概要：${interactionmediate.content}</div>
                                    </div>
                                    <div style="width: 20%;float: left;margin-top: 50px">
                                        <c:if test="${interactionmediate.type == 1}">
                                            <div>当前状态：等待被邀请方接受</div>
                                        </c:if>
                                        <c:if test="${interactionmediate.type == 2}">
                                            <div>当前状态：对方已同意<br><a href="${path}/home/community/beforeBookMediator?useruuid=${useruuid}" style="color: #0000cc">请申请调解员</a></div>
                                        </c:if>
                                        <c:if test="${interactionmediate.type == 4}">
                                            <div>对方已拒绝</div>
                                        </c:if>
                                    </div>
                                </div>
                            </c:forEach>

                    </div>
                    <%--接收的调解--%>
                    <div id="content2" class="tab-content" >
                        <c:forEach items="${interactionmediates1}" var="interactionmediate">
                            <div class="tab-pane active" id="1" style="margin-top: 20px;border: 1px solid silver;height: 150px">
                                <div style="float: left ;width: 80%">
                                    <div style="margin-top: 20px">
                                        <div style="margin-left: 20px;">邀请者姓名：${interactionmediate.namef}   
                                        邀请者电话：${interactionmediate.mobilef}</div>
                                    </div>
                                    <div style="word-wrap:break-word;margin-top: 20px;margin-left: 20px">
                                        调解概要：${interactionmediate.content}</div>
                                </div>
                                <div style="width: 20%;float: left;margin-top: 50px">
                                <c:if test="${interactionmediate.type == 1}">

                                        <button class="btn btn-default" style="background-color: #5bc46a" onclick="agreeMediate('${interactionmediate.uuid}')">
                                            同意
                                        </button>
                                        <button class="btn btn-default" style="background-color: #f47070" onclick="disagreeMediate('${interactionmediate.uuid}')">
                                            拒绝
                                        </button>

                                </c:if>
                                <c:if test="${interactionmediate.type == 2}">
                                    <div >当前状态：已接受邀请，等待邀请者申请调解员</div>
                                </c:if>
                                <c:if test="${interactionmediate.type == 4}">
                                    <div >当前状态：已拒绝</div>
                                </c:if>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div>

记得加上js控制：

 function changecss(m) {
    if(m == 1 ){
        var a1 = document.getElementById("li1");
        var c1 = document.getElementById("content1");
        a1.className="active";
        c1.style.display = "none"
        var a2 = document.getElementById("li2");
        var c2 = document.getElementById("content2");
        a2.className="";
        c2.style.display = ""
    }
    if(m == 2 ){
        var a1 = document.getElementById("li1");
        var c1 = document.getElementById("content1");
        a1.className="";
        c1.style.display = ""
        var a2 = document.getElementById("li2");
        var c2 = document.getElementById("content2");
        a2.className="active";
        c2.style.display = "none"
    }
}