2016-08-11 2 views
0

「レジスタ」と「サインイン」のフォームを含むタブ付きのドロップダウンメニューを作成する際に問題が発生します。なぜか分からない。私は普及したe.stoppropogate()を試しましたが、それは私のために働くようには見えません。どんな助けもありがとう。ここでブートストラップのタブ付きドロップダウンメニューは、ナビの丸薬をクリックすると終了します。

は私のHTMLです:

<div class="container-fluid "> 
    <div class = "container"> 
     <a class="navbar-brand" href="#"><img src="img/logo.svg" height = "75px" type="image/svg+xml"/></a> 
    <form> 
     <div id="myDropDown " class="dropdown pull-right"> 
      <a id="dLabel" role="button" data-target="javascript:;" href="/page.html">Sign In/Register <span class="caret"></span></a> 
       <ul id="myTabs" class="dropdown-menu" role="menu" aria-labelledby="dLabel"> 
        <ul class="nav nav-pills "> 
         <li class="active"><a href="#login" data-toggle="tab" >Sign In</a></li> 
         <li><a href="#register" data-toggle="tab" >Register</a></li> 
        </ul> 

        <!-- Tab panes --> 
        <div class="tab-content"> 
         <div class="tab-pane " id="register"> 
         <!--register section--> 
          <div class="col-md-12"> 
           <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> 
            <div class="form-group"> 
             <span>Name:</span> 
             <label class="sr-only" for="exampleInputEmail2">Name</label> 
             <input type="text" class="form-control" id="exampleInputEmail2" placeholder="Name" required> 
            </div> 
            <span>Email:</span> 
            <div class="form-group"> 
             <label class="sr-only" for="exampleInputEmail2">Email address</label> 
             <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> 
            </div> 
            <span>Password:</span> 
            <div class="form-group"> 
             <label class="sr-only" for="exampleInputPassword2">Password</label> 
             <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required> 
             </div> 
             <span>Confirm Password:</span> 
             <div class="form-group"> 
              <label class="sr-only" for="exampleInputPassword2">Confirm Passowrd</label> 
              <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Confirm Password" required> 
             </div> 
             <div class="form-group"> 
              <button type="submit" class="btn btn-success btn-block">Register</button> 
             </div> 
            </form> 

            <!--end register form--> 
           </div> 
          </div> 
          <!--tab pane register--> 

          <!--begin login form--> 
          <div class="tab-pane active" id="login"> 
           <div class="col-md-12"> 
            <form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav"> 

             <div class="form-group"> 
              <label class="sr-only" for="exampleInputEmail2">Email address</label> 
              <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required> 
             </div> 

             <div class="form-group"> 
              <label class="sr-only" for="exampleInputPassword2">Password</label> 
              <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required> 
             </div> 

             <div class="checkbox"> 
              <label><input type="checkbox"> Remember me</label> 
             </div> 

             <div class="form-group"> 
              <button type="submit" class="btn btn-success btn-block">Sign in</button> 
             </div> 
            </form> 
            <!--end login form--> 
           </div> 
          </div> 
          <!--tab pane login--> 
         </div> 
         <!--tab content--> 
        </ul> 
        <!-- myTabs ul--> 
        <ul class = "pull-right"><a href="#"><span class=" glyphicon glyphicon-shopping-cart"></span></a></ul> 
       </div> 
       <!--myDropdown--> 
      </form> 
     </div><!--container--> 
    </div><!--container fluid--> 

これは私のjavascriptです:実際に使用すると、1つの属性 が欠落している

<script> 
    $('.dropdown-menu a[data-toggle="tab"]').click(function (e) { 
     e.stopPropagation()   
     $(this).tab('show') 
    }) 
    </script> 
+0

あなたはフィドルを共有できますか? – Ygalbel

+0

ここで私はフィドルを共有しようとしています。私はそれが新しいので、正しく動作していないようです。ブートストラップが正しくロードされていないようです。 https://jsfiddle.net/vudanthony/zzpscua0/ –

答えて

3

ただ、ID = "dLabelとデータトグル= "ドロップダウン" 属性を追加します"下の例に示すように。 それは動作します.. お楽しみください:)

<a id="dLabel" role="button" data-toggle="dropdown" href="/page.html">Sign In/Register <span class="caret"></span></a> 
+0

こんにちは、私はデータトグル= "ドロップダウン"を追加し、それはまだ動作していないように見えます:( –

+0

[CODEPEN](http: //codepen.io/jpI/pen/KrbGbJ) –

+0

こんにちはJyoti、 私は文字通り自分のコードをコピーしてヘッダファイルに貼り付けましたが、まだ動作していないようです。その結果はwww.mascolti.com/で確認できます。 header.html あなたは私のためにダブルチェック? おかげで、あなたのHTML構造とカスタムスクリプトの場所に –

関連する問題