Bootstrap Pills 选项卡：下一个和上一个按钮无法正常工作

Question

Using Django Framework, Bootstrap v4.5.2.

<ul class="nav nav-pills nav-dark nav-fill bg-dark" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link text-light active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">One</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link text-light" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">Two</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link text-light" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">Three</a>
  </li>
</ul>

<div class="tab-content pb-3" id="pills-tabContent">

  <div class="tab-pane fade show active p-3 text-center" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab">
    <a class="btn btn-primary btnNext">Next &#8594;</a>
  </div>

  <div class="tab-pane fade p-3 text-center" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab"> 
    <a href="" class="btn btn-primary btnPrevious"> &#8592; Previous</a>
    <a href="" type="button" class="btn btn-primary btnNext ">Next &#8594;</a>
  </div>

  <div class="tab-pane fade p-3 text-center" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab"> 
    <a href="" class="btn btn-primary btnPrevious"> &#8592; Previous</a>
  </div>
</div>



<script type="text/javascript">
    $('.btnNext').click(function() {
        $('.nav-pills .active').parent().next('li').find('a').trigger('click');
    });
    
    $('.btnPrevious').click(function() {
        $('.nav-pills .active').parent().prev('li').find('a').trigger('click');
    });
</script>

I tried all the javascript seeing stackoverflow others answer but this does not work for me

How can I solve this to work perfectly? If anything is a mistake on my code or you want to give me some suggestions, then reply to me.

Answer 1

Please try this,

You can add e.preventDefault(); in click() event.

base.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Then add in Bootstrap Pills Tab's html instead of adding CDN.

{% extends "base.html" %}

 $('.btnNext').click(function(e) { e.preventDefault(); $('.nav-pills .active').parent().next('li').find('a').trigger('click'); }); $('.btnPrevious').click(function(e) { e.preventDefault(); $('.nav-pills .active').parent().prev('li').find('a').trigger('click'); });

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <ul class="nav nav-pills nav-dark nav-fill bg-dark" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link text-light active" id="pills-one-tab" data-toggle="pill" href="#pills-one" role="tab" aria-controls="pills-one" aria-selected="true">One</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link text-light" id="pills-two-tab" data-toggle="pill" href="#pills-two" role="tab" aria-controls="pills-two" aria-selected="false">Two</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link text-light" id="pills-three-tab" data-toggle="pill" href="#pills-three" role="tab" aria-controls="pills-three" aria-selected="false">Three</a> </li> </ul> <div class="tab-content pb-3" id="pills-tabContent"> <div class="tab-pane fade show active p-3 text-center" id="pills-one" role="tabpanel" aria-labelledby="pills-one-tab"> <a class="btn btn-primary btnNext">Next &#8594;</a> </div> <div class="tab-pane fade p-3 text-center" id="pills-two" role="tabpanel" aria-labelledby="pills-two-tab"> <a href="" class="btn btn-primary btnPrevious"> &#8592; Previous</a> <a href="" type="button" class="btn btn-primary btnNext ">Next &#8594;</a> </div> <div class="tab-pane fade p-3 text-center" id="pills-three" role="tabpanel" aria-labelledby="pills-three-tab"> <a href="" class="btn btn-primary btnPrevious"> &#8592; Previous</a> </div> </div>