Question

如何使用Javascript打开模式中的特定选项卡？这是我的代码。当有人点击以下按钮时，E.g OPEN TAB1应打开TAB1内容，OPEN TAB2应打开TAB2内容

<!-- Button trigger modal -->
<a data-toggle="modal" class="btn" href="#loginModal">OPEN TAB1</a>

<a class="btn" id="btnRegister">OPEN TAB2</a>

<!-- modal -->

<div class="well modal fade" id="loginModal">
          <div class="modal-body" style="text-align:left;">
              <div class="row-fluid">
                  <div class="span10 offset1">
                      <div id="modalTab">
                          <div class="tab-content">
                              <div class="tab-pane active" id="login">
                                 TAB 1 CONTENTS
                              </div>
                              <div class="tab-pane fade" id="create">
                             TAB 2 CONTENTS 
                            <a href="#login" data-toggle="tab">OPEN TAB 1
                                  </div>
                              </div>
                          </div>

          <div class="modal-footer well">

            <a href="#create"  data-toggle="tab" class="btn btn-success">OPEN TAB 2</a>
          </div>
              </div>

以下脚本对我不起作用

 <script> 
    $('#btnRegister').on('click', function() {

         $('#loginModal').modal('show');
        $('.modalTab #create').tab('show');

    });
    </script>

Answer 1

注意：OpenTAB2链接上的数据切换选项卡和href。

http://jsfiddle.net/jmmLv0ey/

<!-- Button trigger modal -->
<a data-toggle="modal" class="btn" href="#loginModal">OPEN TAB1</a>

<a class="btn" data-toggle="tab" id="btnRegister" href="#create2">OPEN TAB2</a>

<!-- modal -->

<div class="well modal fade" id="loginModal">
      <div class="modal-body" style="text-align:left;">
          <div class="row-fluid">
              <div class="span10 offset1">
                  <div id="modalTab">
                      <div class="tab-content">
                          <div class="tab-pane" id="login">
                             TAB 1 CONTENTS
                          </div>
                          <div class="tab-pane"  id="create2">
                         TAB 2 CONTENTS 
                        <a href="#login" data-toggle="tab">OPEN TAB 1
                              </div>
                          </div>
                      </div>

      <div class="modal-footer well">

        <a href="#create"  data-toggle="tab" class="btn btn-success">OPEN TAB 2</a>
      </div>
          </div>
                   <script> 
$('#btnRegister').on('click', function() {

                       $('#loginModal').modal('show');
    $('#create2').tab('show');
    openRegister();

});
</script>

在模态中打开特定选项卡

1 个答案: