按鈕單擊到下一個選項卡，而不是選項卡單擊

Question

我有這個HTML，看起來像這樣：

  $(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active"); }); }); 

 div.bhoechie-tab-container{ z-index: 10; color: black; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; border:1px solid #ddd; margin-top: 20px; /* margin-left: 50px;*/ -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175); background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: #5A55A3; } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: #DEDEDE; background-image: #FFC20E; color: #000; border-left: 12px solid #FFC20E !important; border-color:#DEDEDE; } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; position: absolute; left: 88%; top: 51%; margin-top: -13px; border-left: 0; border-bottom: 11px solid transparent; border-top: 12px solid transparent; border-left: 24px solid #FFF; transform: rotate(180deg); } div.bhoechie-tab-content{ background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 10px; padding-top: 0px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-8 col-xs-9 bhoechie-tab-container"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 bhoechie-tab-menu"> <div class="list-group"> <a href="#" class="list-group-item pd22 active text-center"> Sign Up/ Login </a> <a href="#" class="list-group-item pd22 text-center"> Confirm Address </a> <a href="#" class="list-group-item pd22 text-center"> Review Order </a> <a href="#" class="list-group-item pd22 text-center brdbin"> Make Payment </a> </div> </div> <div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab"> <!-- flight section --> <div class="bhoechie-tab-content active"> <div class="row"> <div class="col-md-6 prel"> <div class="lin"> </div> <h3>Login</h3> <div class="pd10"> <p>Please Enter Your Email Address</p> <div class="mb8"></div> <form class="form-horizontal pd150" role="form"> <div class="form-group fmgbl"> <input type="email" class="form-control brd" id="email" placeholder="Name"> </div> <div class="form-group fmgbl"> <input type="email" class="form-control brd" id="email" placeholder="Email"> </div> <div class="mb8"></div> <div class="row"> <div class="col-md-6 col-md-offset-6 pd00"> <div style="float:right"> <small>Forgot Password</small></div><br> </div> </div> <div class="mb8"></div> <div class="row"> <div class="col-md-6 col-md-offset-6 pd00"> <div class="sgn" style="float:right"> <button class="btn btn-primary con " >Continue</button></div> </div> </div> </form> </div> </div> <div class="col-md-6 cs"> <button class="btn btn-primary btn-lg signp" >Sign Up</button> </div> </div> </div> <!-- train section --> <div class="bhoechie-tab-content"> <div class="row"> <form class="form-horizontal" role="form"> <div class="col-md-5 "> <h3>Confirm Address</h3> <div class=" fmgbl"> <input type="name" class="form-control brd" id="name" placeholder="Name"> </div> <div class=" fmgbl"> <input type="email" class="form-control brd" id="email" placeholder="Email"> </div> <div class=" fmgbl"> <input type="password" class="form-control brd" id="pass" placeholder="Password"> </div> <div class=" fmgbl"> <input type="cnpassword" class="form-control brd" id="pass" placeholder="Confirm Password"> </div> <div class=" fmgbl"> <textarea class="form-control textar" rows="5" id="comment" placeholder="Cover letter"></textarea> </div> </div> <div class="col-md-5 mgtb2"> <div class=" fmgbl"> <input type="text" class="form-control brd" id="landmark" placeholder="Name"> </div> <div class=" fmgbl"> <input type="text" class="form-control brd" id="city" placeholder="City"> </div> <div class=" fmgbl"> <input type="text" class="form-control brd" id="state" placeholder="State"> </div> <div class=" fmgbl"> <input type="text" class="form-control brd" id="phno" placeholder="Phone No"> </div> <div class="mb8"></div> <div class="sgnup"> <button class="btn btn-primary snpg btn-lg" >Sign Up</button></div> </div> </form> </div> </div> <!-- hotel search --> <div class="bhoechie-tab-content " id="myTab"> <div class="table-responsive"> <h4>Review Order</h4> <table class="table table-condensed"> <thead> <tr> <td><strong>Item Details</strong></td> <td class="text-center"><strong>Price</strong></td> <td class="text-center"><strong>Quantity</strong></td> <td class="text-right"><strong>Totals</strong></td> </tr> </thead> <tbody class="tb"> <!-- foreach ($order->lineItems as $line) or some such thing here --> <tr> <td> <div class="row mgprbt"> <div class="col-sm-5 hidden-xs nomarginim"><img src="img/woldwarII.png" alt="..." class="img-responsive"/></div> <div class="col-sm-5 nomargin"> <h5 class="">WORLDWAR II</h5> </div> </div> </td> <td class="text-center">$10.99</td> <td data-th="Quantity"> <input type="number" class="form-control text-center brrad" value="1"> </td> <td class="text-right">$10.99</td> <td class="text-right icn" > <a><i class="fa fa-times" aria-hidden="true"></i></a> </td> </tr> <tr> <td> <div class="row mgprbt"> <div class="col-sm-5 hidden-xs nomarginim"><img src="img/woldwarII.png" alt="..." class="img-responsive"/></div> <div class="col-sm-5 nomargin"> <h5 class="">WORLDWAR II</h5> </div> </div> </td> <td class="text-center">$10.99</td> <td data-th="Quantity"> <input type="number" class="form-control text-center brrad" value="1"> </td> <td class="text-right">$10.99</td> <td class="text-right icn" > <a><i class="fa fa-times" aria-hidden="true"></i></a> </td> </tr> <tr> <td class="thick-line"></td> <td class="thick-line"></td> <td class="thick-line text-center"><strong>Subtotal</strong></td> <td class="thick-line text-right">$670.99</td> </tr> <tr> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line text-center"><strong>Shipping</strong></td> <td class="no-line text-right">$15</td> </tr> <tr> <td class="no-line"></td> <td class="no-line"></td> <td class="no-line text-center"><strong>Total</strong></td> <td class="no-line text-right">$685.99</td> </tr> </tbody> </table> </div> <div class="sgn" style="float:right; margin-top: 7%;"> <button class="btn btn-primary conp " >Proceed To Pay</button></div> </div> <div class="bhoechie-tab-content"> <center> <h1 style="font-size:12em;color:#55518a"><img src="img/logo_new_small.png" class="img-responsive"></h1> <h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2> <h3 style="margin-top: 0;color:#55518a">Safari Tv Channel</h3> </center> </div> <div class="bhoechie-tab-content"> <center> <h1 class="glyphicon glyphicon-credit-card" style="font-size:12em;color:#55518a"></h1> <h2 style="margin-top: 0;color:#55518a">Cooming Soon</h2> <h3 style="margin-top: 0;color:#55518a">Credit Card</h3> </center> </div> </div> </div> </div> 

我需要轉到下一個選項卡，單擊繼續按鈕，而不是單擊選項卡。 選項卡選擇應該被禁用。 那么，如何通過單擊第一個按鈕從選項卡觸發click事件？

Answer 1

您無需觸發事件，只需使用一個函數調用所需的函數即可，看起來更加簡潔

function goTo(tab){
    $('.listgroup a.active').removeClass("active");
    $(tab).addClass("active");
}
//tab should be the selector, you can use ids