I have this HTML which looks like this:
我有这个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>I need to go to next tab clicking the continue button instead of clicking the tab. Tab Selection should be disable. So how can I trigger the click event from the tab by clicking on the first button ?
我需要转到下一个选项卡,单击“继续”按钮而不是单击选项卡。应禁用选项卡选择。那么如何通过单击第一个按钮从选项卡触发click事件?
1 个解决方案
#1
0
you dont need to trigger the event, just call the functions you need with a function for example, to look more clean
你不需要触发事件,只需用函数调用你需要的函数,看起来更干净
function goTo(tab){
$('.listgroup a.active').removeClass("active");
$(tab).addClass("active");
}
//tab should be the selector, you can use ids
#1
0
you dont need to trigger the event, just call the functions you need with a function for example, to look more clean
你不需要触发事件,只需用函数调用你需要的函数,看起来更干净
function goTo(tab){
$('.listgroup a.active').removeClass("active");
$(tab).addClass("active");
}
//tab should be the selector, you can use ids