时间戳

首页 > 解决方案 > Bootstrap Pills 选项卡：下一个和上一个按钮无法正常工作

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

问题描述

使用 Django 框架，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>

我尝试了所有 javascript 看到 stackoverflow 其他人的回答，但这对我不起作用

我怎样才能解决这个问题以完美地工作？ 如果我的代码有任何错误或者您想给我一些建议，请回复我。

标签： javascripthtml

解决方案

请试试这个，

您可以添加 click()事件e.preventDefault();。

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>

然后添加 Bootstrap Pills Tab 的 html 而不是添加 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>

推荐阅读