открыть мод загрузки с помощью специальной скрытой вкладки (без вкладок nav) с помощью jquery

Question

Это модальное поле не имеет видимой вкладки.Я просто использую атрибут 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, но я не хочу.Без этой проблемы все в порядке.

Answer 1

(К сожалению @Chetan Vaghela, я не могу добавить комментарий). Вы обновляете href velue #register_tab до #register_tab_bt n. Но это не работает. Тем не менее, я не могу зайти в .modal-footer class ссылки формы входа, чтобы зарегистрировать форму или пароль потерял форму. Любой другой путь?

Answer 2

Да, вы можете открывать определенные скрытые вкладки с помощью 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();
});
});

Дайте мне знать, поможет ли это вам!