如何用jQuery打开Bootstrap模态框中的指定隐藏Tab（无nav-tabs）

问题梳理 #

你手里有个不带可见.nav-tabs的Bootstrap模态框，想要通过不同的<button>或<a>触发模态框时，直接激活对应的隐藏Tab（比如login_tab/lostpass_tab/register_tab），同时还要把这些触发元素封装成短码，方便在页面模板里调用。下面是具体的实现方案：

解决方案步骤 #

1. 调整触发元素的属性

先给每个触发元素加一个自定义属性data-target-tab，用来明确指定要激活的Tab ID，这样jQuery能轻松拿到目标Tab的标识：

<!-- 登录触发按钮 -->
<button type="button" id="wp-ajax-logout" class="btn" data-toggle="modal" data-target="#bootmodal" data-target-tab="#login_tab">Login</button>

<!-- 找回密码触发按钮 -->
<button type="button" id="wp-ajax-lost-pass" class="btn" data-toggle="modal" data-target="#bootmodal" data-target-tab="#lostpass_tab">Lost your password</button>

<!-- 注册触发链接（仅注册开启时显示） -->
<?php if (get_option( 'users_can_register' ) == true): ?>
<a href="#" class="btn" data-toggle="modal" data-target="#bootmodal" data-target-tab="#register_tab">Create New Account</a>
<?php endif; ?>

注意：把原来<a>标签的href改成#，避免不必要的页面跳转，用data-target-tab来传递目标Tab的信息就够了。

2. 编写jQuery切换逻辑

我们利用Bootstrap模态框的show.bs.modal事件（模态框即将显示时触发），拿到触发元素，然后切换对应Tab的激活状态，完全不用依赖.nav-tabs：

jQuery(document).ready(function($) {
    // 监听模态框即将显示的事件
    $('#bootmodal').on('show.bs.modal', function(e) {
        // 获取触发模态框的元素
        var triggerEl = $(e.relatedTarget);
        // 从自定义属性里拿到目标Tab的选择器
        var targetTab = triggerEl.data('target-tab');
        
        // 如果目标Tab存在
        if (targetTab && $(targetTab).length) {
            // 先移除所有Tab的激活类
            $('.tab-pane', this).removeClass('active in');
            // 给目标Tab添加激活类，让它显示出来
            $(targetTab).addClass('active in');
        }
    });
});

这段代码的核心就是抓住模态框显示的时机，精准切换Tab状态，完全绕开了原生Bootstrap的Tab导航依赖。

3. 封装成短码函数

把触发元素封装成短码，方便在页面模板或编辑器里调用。在主题的functions.php里添加以下代码：

// 登录按钮短码
function login_modal_shortcode() {
    ob_start();
    ?>
    <button type="button" id="wp-ajax-logout" class="btn" data-toggle="modal" data-target="#bootmodal" data-target-tab="#login_tab"><?php _e('Login','woocomputers'); ?></button>
    <?php
    return ob_get_clean();
}
add_shortcode('login_modal', 'login_modal_shortcode');

// 找回密码按钮短码
function lostpass_modal_shortcode() {
    ob_start();
    ?>
    <button type="button" id="wp-ajax-lost-pass" class="btn" data-toggle="modal" data-target="#bootmodal" data-target-tab="#lostpass_tab"><?php _e('Lost your password','woocomputers'); ?></button>
    <?php
    return ob_get_clean();
}
add_shortcode('lostpass_modal', 'lostpass_modal_shortcode');

// 注册按钮短码（仅注册开启时显示）
function register_modal_shortcode() {
    if (get_option('users_can_register') != true) {
        return '<span class="label label-danger">' . __('Registration is disabled right now!','woocomputers') . '</span>';
    }
    ob_start();
    ?>
    <a href="#" class="btn" data-toggle="modal" data-target="#bootmodal" data-target-tab="#register_tab"><?php _e('Create a New Account','woocomputers'); ?></a>
    <?php
    return ob_get_clean();
}
add_shortcode('register_modal', 'register_modal_shortcode');

现在你可以在页面模板里这样调用：

<?php echo do_shortcode('[login_modal]'); ?>
<?php echo do_shortcode('[lostpass_modal]'); ?>
<?php echo do_shortcode('[register_modal]'); ?>

或者直接在WordPress编辑器里输入[login_modal]这类短码就行。

额外提示 #

• 确保页面已经加载了Bootstrap的CSS和JS，以及jQuery（WordPress默认自带jQuery）。
• 你原来的模态框Tab结构不用改，完全保留就行，不需要加.nav-tabs元素。
• 如果不想用淡入动画，可以移除Tab里的fade in类。

内容的提问来源于stack exchange，提问作者Zahid Hossain