按钮单击下一个选项卡而不是选项卡单击

时间:2016-05-05 18:09:18

标签: javascript jquery html twitter-bootstrap css3

我有这样的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事件?

1 个答案:

答案 0 :(得分:0)

你不需要触发事件,只需用函数调用你需要的函数,例如,看起来更干净

private void Button_Click(object sender, RoutedEventArgs e)
        {
            string fileName = Directory1.SelectedValue.ToString();//.ToStrin();
            Object to = Directory1.SelectedValue;
            Directory1.Items.ToString();
            string[] args = Environment.GetCommandLineArgs();

            string sourceFile = args[1] + "\\" + fileName;
            string destpath = args[2] + "\\" + fileName;

            if (File.Exists(destpath))
            {
                File.Delete(destpath);
            }
            File.Copy(sourceFile, destpath);
        }