2017-08-09 126 views
-1

我以爲ist很容易,但我沒有任何想法。我的問題是我有一個下一個和一個上一個按鈕來切換Bootstrap 4中的NavTabs,但只有第一次點擊工作。Bootstrap 4 NavTabs Next/Previous not working

這裏是我的代碼:

jQuery('#next').on('click', function(){ 
     jQuery('.nav-tabs li .active').parent().next('li').find('a').trigger('click'); 
    }); 
    jQuery('#prev').on('click', function(){ 
     jQuery('.nav-tabs li .active').parent().prev('li').find('a').trigger('click'); 
    }); 

希望你能幫助我:)從法蘭克福

問候

+1

請張貼的完整代碼,所以我們實際上可以幫助調試。 –

+0

HTML在哪裏? – ZimSystem

回答

0

下面是完整的代碼。

<ul class="nav nav-tabs"> 
<li class="nav-item"> 
    <a class="nav-link active" href="#welcome" data-toggle="tab">Welcome</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" href="#step1" data-toggle="tab">Step 1: Settings</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" href="#step2" data-toggle="tab">Step 2: User Information's</a> 
</li> 
<li class="nav-item"> 
    <a class="nav-link" href="#step3" data-toggle="tab">Step 3: Create First Project</a> 
</li> 
</ul> 
<div class="tab-content"> 
<div class="tab-pane active" id="welcome" role="tabpanel"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Welcome to Deployer</div> 
     <div class="panel-body clearfix"> 
      <button type="button" id="prev" class="btn btn-default float-left">Previous</button> 
      <button type="button" id="next" class="btn btn-primary float-right">Next</button> 
     </div> 
    </div> 
</div> 
<div class="tab-pane" id="step1" role="tabpanel"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Settings</div> 
     <div class="panel-body clearfix"> 
      <button type="button" id="prev" class="btn btn-default float-left">Previous</button> 
      <button type="button" id="next" class="btn btn-primary float-right">Next</button> 
     </div> 
    </div> 
</div> 
<div class="tab-pane" id="step2" role="tabpanel"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">User Information's</div> 
     <div class="panel-body clearfix"> 
      <button type="button" id="prev" class="btn btn-default float-left">Previous</button> 
      <button type="button" id="next" class="btn btn-primary float-right">Next</button> 
     </div> 
    </div> 
</div> 
<div class="tab-pane" id="step3" role="tabpanel"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Welcome</div> 
     <div class="panel-body"> 
      <div class="form-actions text-right"> 
       <button type="submit" class="btn btn-primary">Submit</button> 
      </div> 
     </div> 
    </div> 
</div>