2017-08-09 98 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>