按钮上的显示选项卡内容单击无法在引导程序中工作

时间：2016-07-01 10:45:47

标签： jquery html twitter-bootstrap

为什么我的解决方案不起作用？

<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>

2 个答案:

答案 0 :(得分：2)

您不必手动删除引导程序的类。

按名称显示所需标签的正确方法如下：

$('.nav-tabs a[href="#billing"]').tab('show');

其中a[href="#billing"]是我们要以编程方式打开的标签链接。 

var $cartCounter = 1;
$(document).ready(function() {
  $('#next').click(function(e) {
    e.preventDefault();
    if ($cartCounter === 1) {
      $('.nav-tabs a[href="#billing"]').tab('show');
      $('#previous').removeClass('hidden');
      $cartCounter = 2;

    } else if ($cartCounter === 2) {
      $('.nav-tabs a[href="#payment"]').tab('show');
      $('#next').addClass('hidden'); //add hidden class to the next button
      $cartCounter = 3;
    } else {
      return false;
    }
  });


  
  $('#previous').click(function(e) {
    e.preventDefault();
    if ($cartCounter === 3) {
      $('.nav-tabs a[href="#billing"]').tab('show');
      $('#next').removeClass('hidden'); //remove hidden class from the next button
      $cartCounter = 2;
    } else if ($cartCounter === 2) {
      $('.nav-tabs a[href="#checkout"]').tab('show');
      $('#previous').addClass('hidden'); //add hidden class to the previous button
      $cartCounter = 1;
    } else {
      return false;
    }
  });

});
<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>
<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>

答案 1 :(得分：0)

<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">
            <div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#checkout" aria-controls="checkout" role="tab" data-toggle="tab">Checkout</a></li>
    <li role="presentation"><a href="#billing" aria-controls="billing" role="tab" data-toggle="tab">Billing</a></li>
    <li role="presentation"><a href="#payment" aria-controls="payment" role="tab" data-toggle="tab">Payment</a></li>

  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="checkout">Checkout</div>
    <div role="tabpanel" class="tab-pane" id="billing">Billing</div>
    <div role="tabpanel" class="tab-pane" 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 (  );
     $(this).tab('show');
    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>

试试这个。它的工作。

相关问题
最新问题