前端tab页实例

<div class="tabbable">
<ul class="nav nav-tabs padding-16">
<c:forEach items="${storedCards}" var="storedCards"
varStatus="x">
<li><a data-toggle="tab"
href="#storedCards_${storedCards.id}" aria-expanded="true">
${storedCards.cardname}(全额${storedCards.money+storedCards.givemoney})
</a></li>
</c:forEach>
<c:forEach items="${packageCards}" var="packageCards"
varStatus="y">
<li><a data-toggle="tab"
href="#packageCards_${packageCards.id}" aria-expanded="true">
${packageCards.cardname} </a></li>
</c:forEach>
<c:forEach items="${bigCards}" var="bigCards" varStatus="z">
<li><a data-toggle="tab" href="#bigCards_${bigCards.id}"
aria-expanded="true"> ${bigCards.cardname} </a></li>
</c:forEach>
</ul>
<div class="tab-content profile-edit-tab-content">
<c:forEach items="${storedCards}" var="storedCards"
varStatus="x">
<div id="storedCards_${storedCards.id}" class="tab-pane ">
dddddd</div>
</c:forEach>
<c:forEach items="${packageCards}" var="packageCards"
varStatus="y">
<div id="packageCards_${packageCards.id}" class="tab-pane ">ddd</div>
</c:forEach>
<c:forEach items="${bigCards}" var="bigCards" varStatus="z">
<div id="bigCards_${bigCards.id}" class="tab-pane ">
<div class="row">
<div class="col-xs-12">
<table class="table table-bordered table-hover"
id="simple-table">
<thead>
<tr>
<th>姓名</th>
<th>消费业务类型</th>
<th>日期</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>王小姐</td>
<td></td>
<td>开卡</td>
<td>134654.00元</td>
</tr>
</tbody>
</table>
</div>
<!-- /.span -->
</div>
</div>
</c:forEach>
</div>
</div>