1
なぜ私の解決策が機能しないのですか？ボタンのクリック時にタブの内容を表示すると、ブートストラップで動作しない
<html lang="en">
<head>
<title>Tabs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a id="checkout-tab" href="#checkout" aria-controls="checkout" role="tab" data-toggle="tab">Shopping Cart</a></li>
<li role="presentation"><a id="billing-tab" href="#billing" aria-controls="billing" role="tab">Billing Details</a></li>
<li role="presentation"><a id="payment-tab" href="#payment" aria-controls="payment" role="tab">Payment</a></li>
</ul>
<div class="cart-patagonia">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active checkout-cart-wrap" id="checkout">
Checkout
</div>
<div role="tabpanel" class="tab-pane fade" id="billing">
Billing
</div>
<div role="tabpanel" class="tab-pane fade" id="payment">
Payment
</div>
</div>
</div>
<br><br><br><br><br><br>
<a id="next" class="btn btn-default btn-lg shopping-cart-navigation-button pull-right" role="button">Next <span class="glyphicon glyphicon-chevron-right"></span></a>
<a id="previous" class="btn btn-default btn-lg shopping-cart-navigation-button hidden pull-right" role="button"><span class="glyphicon glyphicon-chevron-left"></span> Previous</a>
</div>
</div>
</div>
<script>
var $cartCounter = 1;
$ ('#next').click (function (e) {
e.preventDefault ();
if ($cartCounter === 1)
{
$ ('#billing-tab').attr ('data-toggle','tab'); //add data attribute data-toggle to the next(billing) tab
$ ('#billing').tab ('show'); //show the next(billing) tab content
$ ('#checkout-tab').removeAttr ('data-toggle'); //remove data attribute data-toggle from the current tba so that it is not clickable
$ ('#previous').removeClass ('hidden'); //remove hidden class from the previous button
$cartCounter = 2;
}
else if ($cartCounter === 2)
{
$ ('#payment-tab').attr ('data-toggle','tab'); //add data attribute data-toggle to the next(payment) tab
$ ('#payment').tab ('show'); //show the next(payment) tab content
$ ('#billing-tab').removeAttr ('data-toggle'); //remove data attribute data-toggle from the current tab so that it is not clickable
$ ('#next').addClass ('hidden'); //add hidden class to the next button
$cartCounter = 3;
}
else
{
return false;
}
});
$ ('#previous').click (function (e) {
e.preventDefault ();
if ($cartCounter === 3)
{
$ ('#billing-tab').attr ('data-toggle','tab'); //add data attribute data-toggle to the previous(billing) tab
$ ('#billing').tab ('show'); //show the previous(billing) tab content
$ ('#payment-tab').removeAttr ('data-toggle'); //remove data attribute data-toggle from the current tab so that it is not clickable
$ ('#next').removeClass ('hidden'); //remove hidden class from the next button
$cartCounter = 2;
}
else if ($cartCounter === 2)
{
$ ('#checkout-tab').attr ('data-toggle','tab'); //add data attribute data-toggle to the previous(checkout) tab
$ ('#checkout').tab ('show'); //show the previous(checkout) tab content
$ ('#billing-tab').removeAttr ('data-toggle'); //remove data attribute data-toggle from the current tab so that it is not clickable
$ ('#previous').addClass ('hidden'); //add hidden class to the previous button
$cartCounter = 1;
}
else
{
return false;
}
});
</script>
</body>
</html>
？ –
そのページを表示 –
ブートストラップがすべてのイベントをバインドした後にボタンを追加するため、コードが機能しません。したがって、ブートストラップがイベントリスナーを追加しているときに、 'data-toggle'が存在せず、イベントが付加されていないため、ボタンを見つけることができません。私はモーダルを開始するjsのアプローチを使用するようにアドバイスします。 –