时间戳

首页 > 解决方案 > 通过 jquery 打开带有特定隐藏选项卡（没有导航选项卡）的引导模式

ajax - 通过 jquery 打开带有特定隐藏选项卡（没有导航选项卡）的引导模式

问题描述

此模式框没有可见选项卡。我只是使用href 属性导航到其他页面。

<div id="bootmodal" class="modal fade" tabindex="-1" data-width="370" data-backdrop="static" data-keyboard="false" style="display: none;">
    <div class="tab-content">

    <!--
        NOTE: i'll not use nav-tab
        ===========================
        <ul class="nav nav-tabs col-md-3 custom-bullet">
            <li class="active"><a data-toggle="tab" href="#login_tab">Login</a></li>
            <li><a data-toggle="tab" href="#lostpass_tab">Lost Your Password?</a></li>
        </ul>
    -->

        <div class="tab-pane active fade in" id="login_tab">
            <form id="login" action="login" method="post">
                <div class="modal-header">
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                    <a href="#lostpass_tab" data-toggle="tab"><span class="label label-info pull-left"><?php _e('Lost your password?','woocomputers'); ?></span></a>
                    <?php if (get_option( 'users_can_register' ) != true): ?>
                        <a href="#register_tab" data-toggle="tab"><span class="label label-danger pull-right"><?php _e('Registration is disable rightn now!','woocomputers'); ?></span></a>
                    <?php else: ?>
                    <a href="#register_tab" data-toggle="tab"><span class="label label-danger pull-right"><?php _e('Create a New Account.','woocomputers'); ?></span></a>
                    <?php endif; ?>
                </div>
            </form>
        </div>

        <?php if (get_option( 'users_can_register' ) == true): ?>
            <div class="tab-pane fade in" id="register_tab">
            </div>
        <?php endif; ?>

        <div class="tab-pane fade in" id="lostpass_tab">
        </div>

    </div>
</div>

我想通过使用打开特定的隐藏选项卡

<button type="button" id="wp-ajax-logout" class="btn"  data-toggle="modal" data-target="#bootmodal">Login</button>
<button type="button" id="wp-ajax-lost-pass" class="btn"  data-toggle="modal" data-target="#bootmodal">Lost your password</button>

或通过标签

<a href="#login_tab" class="btn" data-toggle="modal" data-target="#bootmodal" >Register</a>
<a href="#lostpass_tab" class="btn" data-toggle="modal" data-target="#bootmodal" >Register</a>

有没有办法使用 jquery 打开特定的隐藏选项卡？

编辑：

我想通过使用短代码功能来使用触发器<button>Register</button>或<a href="#login_tab">Login</a>来自页面模板。

我在网站周围找到了一些代码。他们使用 js。

$("#bootmodal").on('shown.bs.modal', function(e) {
    var tab = e.relatedTarget.hash;
    $('.nav-tabs a[href="'+tab+'"]').tab('show')
})

他们在这里使用.nav-tabs，但我不想要。没有这个问题一切都很好。

标签： ajaxjquerytwitter-bootstrap

解决方案

是的，您可以使用 jquery 打开特定的隐藏选项卡。我创建了演示，您可以从下面的代码片段中获取参考。

HTML

<ul class="tab-controllers">
      <li class="active"><a id="login_tab_btn" class="btn active" data-toggle="modal" data-target="#bootmodal"  >Login</a></li>
      <li><a id="lostpass_tab_btn" class="btn" data-toggle="modal" data-target="#bootmodal" >Lost Your Password?</a></li>
      <li><a id="register_tab_btn" class="btn" data-toggle="modal" data-target="#bootmodal">Register</a></li>
</ul>


<div id="bootmodal" class="modal fade" tabindex="-1" data-width="370" data-backdrop="static" data-keyboard="false" style="display: none;">
    <div class="tab-content">


        <div class="tab-pane active" id="login_tab">
            <form id="login" action="login" method="post">
                <div class="modal-header"> <h2>Login tab Content</h2>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">
                 <a href="#lostpass_tab_btn"><span class="label label-info pull-left"><?php _e('Lost your password?','woocomputers'); ?></span></a>
                <?php if (get_option( 'users_can_register' ) != true): ?>
                    <a href="#register_tab_btn"><span class="label label-danger pull-right"><?php _e('Registration is disable rightn now!','woocomputers'); ?></span></a>
                <?php else: ?>
                <a href="#register_tab_btn"><span class="label label-danger pull-right"><?php _e('Create a New Account.','woocomputers'); ?></span></a>
                <?php endif; ?>                          
                </div>
            </form>
        </div>

        <?php if (get_option( 'users_can_register' ) == true): ?>
            <div class="tab-pane" id="register_tab">
               <div class="modal-header"> <h2>register tab Content</h2>
                </div>
                <div class="modal-body">

                     </div>
                    <div class="modal-footer">                    
                </div>
            </div>
        <?php endif; ?>

        <div class="tab-pane" id="lostpass_tab">
          <div class="modal-header"><h2>Lost Password tab Content</h2>
                </div>
                <div class="modal-body">
                </div>
                <div class="modal-footer">                    
                </div>
        </div>

    </div>
</div>

JS

jQuery(document).ready(function($) {

jQuery('#login_tab').show();
jQuery('#register_tab').hide();
jQuery('#lostpass_tab').hide();

jQuery(document).on('click', '#login_tab_btn', function() {
    jQuery(".tab-controllers li").removeClass("active");
    jQuery(".tab-controllers li a").removeClass("active");
    jQuery(this).addClass("active");
    jQuery(this).parent().addClass("active");
    jQuery('#register_tab').hide();
    jQuery('#lostpass_tab').hide();
    jQuery('#login_tab').show();
});
 jQuery(document).on('click', '#lostpass_tab_btn', function() {
    jQuery(".tab-controllers li").removeClass("active");
    jQuery(".tab-controllers li a").removeClass("active");
    jQuery(this).addClass("active");
    jQuery(this).parent().addClass("active");
    jQuery('#login_tab').hide();
    jQuery('#register_tab').hide();
    jQuery('#lostpass_tab').show();
});
 jQuery(document).on('click', '#register_tab_btn', function() {
    jQuery(".tab-controllers li").removeClass("active");
    jQuery(".tab-controllers li a").removeClass("active");
    jQuery(this).addClass("active");
    jQuery(this).parent().addClass("active");
    jQuery('#login_tab').hide();
    jQuery('#lostpass_tab').hide();
    jQuery('#register_tab').show();
});
});

让我知道这是否对您有帮助！

推荐阅读