「レジスタ」と「サインイン」のフォームを含むタブ付きのドロップダウンメニューを作成する際に問題が発生します。なぜか分からない。私は普及した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>
あなたはフィドルを共有できますか? – Ygalbel
ここで私はフィドルを共有しようとしています。私はそれが新しいので、正しく動作していないようです。ブートストラップが正しくロードされていないようです。 https://jsfiddle.net/vudanthony/zzpscua0/ –