78

私はjqueryとbootstrapを初めて使用するので、私の間違いを考慮してください.ログインと登録用のbootstrapモーダルを作成しました。ログインと登録と呼ばれる 2 つのナビゲーション タブが含まれています。同じモーダル ウィンドウをポップアップする 2 つのボタンがありますが、モーダル ウィンドウ内に別のタブを表示します。各タブには、多数の入力があるフォームがあります。私の問題は、「ログイン」ボタンをクリックするとモーダルでログインタブが開き、ページの「登録」ボタンをクリックすると登録タブが開くモーダルがポップアップすることです。

これらは、モーダルが開く 2 つのリンクです。

<div class="header-login-li" style="background-color:gray;float:left;width:100px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Login <i class="icon-chevron-down" style="font-size:20px"></i></center></font>
</big></a></div>

<div class="header-register-li" style="background-color:green;float:right;margin-right:-15px;width:130px;height:60px;">
<a data-toggle="modal" href="#regestration" class="header-register-a" >
<big>
<font color="white" class="header-register-font"><center style="margin-top:20px;">Register</center></font>
</big></a>

これが私のタブとその内容のコードです（ここでは不要なコードを避けています）：

 <div class="tabbable" >
      <ul class="nav nav-tabs" ><!--tabs-->
        <li class="active" style="position:absolute;margin-left:0px;" id="logintab">
        <a href="#pane_login" data-toggle="tab">Login</a></li>
        <li style="margin-left:70px;" id="reg_tab" ><a href="#pane_reg" data-toggle="tab">Registration</a></li>

      </ul>
      <div class="tab-content"><!--login tab content-->
         <div id="pane_login" class="tab-pane active">
             <form id="login-form" target="login-signup-iframe" method="post" action="#" name="login-form">

              </form>

        </div><!--/pane_login-->

        <div id="pane_reg" class="tab-pane"><!--registration tab content-->
           <form id="regestration-form" target="login-signup-iframe" method="post" action="#" name="regestration-form">

            </form>
         </div>
        </div><!-- /.tab-content -->
</div><!-- /.tabbable -->

これはjqueryで簡単にできると思いますが、正確な方法はわかりません。だから、誰でも私の問題を解決するのを手伝ってくれませんか。よろしくお願いします?

4

9 に答える 9

16

HTML:

<a href="PageName.php#tabID">link to other page tab</a>

Javascript:

window.onload = function(){  

    var url = document.location.toString();
    if (url.match('#')) {
        $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
    }

    //Change hash for page-reload
    $('.nav-tabs a[href="#' + url.split('#')[1] + '"]').on('shown', function (e) {
        window.location.hash = e.target.hash;
    }); 
}
于 2015-02-04T08:44:03.107 に答える
4

上記の回答に感謝します。現在動作している私のjQueryコードは次のとおりです。

      $(".header-login-li").click(function(){
        activaTab('pane_login');                
      });

      $(".header-register-li").click(function(){
        activaTab('pane_reg');
        $("#reg_log_modal_header_text").css()
      });

      function activaTab(tab){
        $('.nav-tabs a[href="#' + tab + '"]').tab('show');
      };
于 2013-10-25T12:33:17.400 に答える
-1

正しく理解できたかどうかはわかりませんが、Bootstrap タブ メニューからリンクを開くために使用するスニペットを次に示します。

HTML

<ul class="nav nav-tabs">
  <li class="active"><a href="#foo" data-toggle="tab">Foo</a></li>
  <li><a href="#bar" data-toggle="tab">Bar</a></li>
  <li><a href="baz.html" class="external">Baz</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="foo">Foo</div>
  <div class="tab-pane" id="bar">Bar</div>
</div>

Javascript

$('.nav a:not(".external")').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
于 2014-03-06T17:14:59.917 に答える