Question

我认为这很容易，但我不知道。我的问题是我有一个Next和一个上一个按钮来切换Bootstrap 4中的NavTabs，但只有第一次点击工作。

这是我的代码：

    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');
    });

希望你能帮助我:)。

来自法兰克福的问候

Answer 1

这是完整的代码。

    <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>

Answer 2

(function() {
  $('.btn-tab-prev').on('click', function(e) {
    e.preventDefault()
    $('#' + $('.nav-item > .active').parent().prev().find('a').attr('id')).tab('show')
  })
  $('.btn-tab-next').on('click', function(e) {
    e.preventDefault()
    $('#' + $('.nav-item > .active').parent().next().find('a').attr('id')).tab('show')
  })
})();

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>


<div class="container p-4">
  <ul class="nav nav-tabs" id="tab-next-prev" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Tab 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="tab4-tab" data-toggle="tab" href="#tab4" role="tab" aria-controls="tab4" aria-selected="false">Tab 4</a>
    </li>
  </ul>
  <div class="tab-content" id="tab-next-prev-content">
    <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
      <p>Content tab 1.</p>
      <a href="#" role="button" class="btn btn-secondary btn-tab-next">Next</a>
    </div>
    <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
      <p>Content tab 2.</p>
      <a href="#" role="button" class="btn btn-secondary btn-tab-prev">Previous</a>
      <a href="#" role="button" class="btn btn-secondary btn-tab-next">Next</a>
    </div>
    <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab">
      <p>Content tab 3.</p>
      <a href="#" role="button" class="btn btn-secondary btn-tab-prev">Previous</a>
      <a href="#" role="button" class="btn btn-secondary btn-tab-next">Next</a>
    </div>
    <div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="tab4-tab">
      <p>Content tab 4.</p>
      <a href="#" role="button" class="btn btn-secondary btn-tab-prev">Previous</a>
    </div>
  </div>
</div>

Bootstrap 4 NavTabs Next / Previous不工作

2 个答案: