bootstrap中tab的跳转问题

最新推荐文章于 2025-11-05 21:22:23 发布

原创最新推荐文章于 2025-11-05 21:22:23 发布 · 5.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

js 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Bootstrap的Tab插件实现标签页之间的切换。提供了三种不同的方法来激活特定的标签页：通过名称选取、选取第一个标签页及通过索引选取。示例代码展示了如何在页面加载时默认显示指定的标签页。

bootstrap中tab的跳转问题

 <ul id="countTab" class="nav nav-tabs">
       <li class="active">
            <a href="#pbcount" data-toggle="tab">计算</a>
       </li>
       <#if user??>
       <li>
            <a href="#pbhistory" data-toggle="tab" onclick="getHistoryList()">历史记录</a>
       </li>
       </#if>
 </ul>

 <div id="myCountTabContent" class="tab-content">
       <div class="tab-pane fade in active" id="pbcount">
            <#include "count_detail.ftl">
       </div>
       <div class="tab-pane fade" id="pbhistory">
            <#include "count_history.ftl">
       </div>
 </div>

$('#countTab a[href="#pbcount"]').tab('show');// 通过名称选取标签页；
$('#countTab a:first').tab('show');    // 选取第一个标签页；
$('#countTab li:eq(0) a').tab('show');// 选取第1个标签页（从 0 开始索引）。