Boostrap-导航下一个/上一个按钮

时间：2018-07-08 10:03:00

标签： javascript html css bootstrap-4

我的网站上有一个Bootstrap Nav，我想在其中集成“下一个”和“上一个”按钮。我已经尝试过this suggestion，但是它并没有更新我的导航标签，并且通常会覆盖我正在使用的某些引导脚本。

这是到目前为止我得到的：

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 <nav>
        <ul class="nav nav-tabs text-dark" id="nav-tab" role="tablist">
            <li><a class="nav-item nav-link active"  id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><strong>Vorbereitung</strong></a></li> 
            <li><a class="nav-item nav-link" id="nav-anfahrt-tab" data-toggle="tab" href="#nav-anfahrt" role="tab" aria-controls="nav-anfahrt" aria-selected="false"><strong>Anfahrt</strong></a></li>
            <li><a class="nav-item nav-link" id="nav-S7-tab" data-toggle="tab" href="#nav-S7" role="tab" aria-controls="nav-S7" aria-selected="false"><strong>Der Aufstieg</strong></a></li>
            <li><a class="nav-item nav-link" id="nav-gipfel-tab" data-toggle="tab" href="#nav-gipfel" role="tab" aria-controls="nav-gipfel" aria-selected="false"><strong>Der Gipfel</strong></a></li>
            <li><a class="nav-item nav-link" id="nav-abstieg-tab" data-toggle="tab" href="#nav-abstieg" role="tab" aria-controls="nav-abstieg" aria-selected="false"><strong>Der Abstieg</strong></a></li>
            <li><a class="nav-item nav-link" id="nav-fazit-tab" data-toggle="tab" href="#nav-fazit" role="tab" aria-controls="nav-fazit" aria-selected="false"><strong>Fazit</strong></a></li>

        </ul>
    </nav>
    
        <div class="tab-content border-dark rounded shadow-lg" id="nav-tabContent" style="padding: 1rem 1.5rem ">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
            <h3><strong>Die Vorbereitung</strong></h3>
            
            <a class="btn btn-outline-primary btnNext" >weiter</a>
        </div>
        <div class="tab-pane fade" id="nav-anfahrt" role="tabpanel" aria-labelledby="nav-profile-tab">
            <h3><strong>Der Anfahrtsplan</strong></h3>
             <a class="btn btn-outline-primary btnPrevious" >zurück</a>
            <a class="btn btn-outline-primary btnNext" >weiter</a>
        </div>
        <div class="tab-pane fade" id="nav-S7" role="tabpanel" aria-labelledby="nav-contact-tab">
            <h3><strong>Der Aufstieg</strong></h3> 
            <a class="btn btn-outline-primary btnPrevious" >zurück</a>
            <a class="btn btn-outline-primary btnNext" >weiter</a>
            
        </div>
        <div class="tab-pane fade" id="nav-gipfel" role="tabpanel" aria-labelledby="nav-contact-tab">
            <h3><strong>Der Gipfel</strong></h3>
             <a class="btn btn-outline-primary btnPrevious" >zurück</a>
            <a class="btn btn-outline-primary btnNext" >weiter</a>
            
        </div>
        <div class="tab-pane fade" id="nav-abstieg" role="tabpanel" aria-labelledby="nav-contact-tab">
            <h3><strong>Der Abstieg</strong></h3>
             <a class="btn btn-outline-primary btnPrevious" >zurück</a>
            <a class="btn btn-outline-primary btnNext" >weiter</a>
        </div>
        <div class="tab-pane fade" id="nav-fazit" role="tabpanel" aria-labelledby="nav-contact-tab">
            <h3><strong>Fazit</strong></h3>
             <a class="btn btn-outline-primary btnPrevious" >zurück</a>
        
        </div>
    </div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

1 个答案:

答案 0 :(得分：0)

$('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">

<nav>
    <ul class="nav nav-tabs text-dark" id="nav-tab" role="tablist">
        <li>
            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home"
                aria-selected="true">
                <strong>Vorbereitung</strong>
            </a>
        </li>
        <li>
            <a class="nav-item nav-link" id="nav-anfahrt-tab" data-toggle="tab" href="#nav-anfahrt" role="tab" aria-controls="nav-anfahrt"
                aria-selected="false">
                <strong>Anfahrt</strong>
            </a>
        </li>
        <li>
            <a class="nav-item nav-link" id="nav-S7-tab" data-toggle="tab" href="#nav-S7" role="tab" aria-controls="nav-S7" aria-selected="false">
                <strong>Der Aufstieg</strong>
            </a>
        </li>
        <li>
            <a class="nav-item nav-link" id="nav-gipfel-tab" data-toggle="tab" href="#nav-gipfel" role="tab" aria-controls="nav-gipfel"
                aria-selected="false">
                <strong>Der Gipfel</strong>
            </a>
        </li>
        <li>
            <a class="nav-item nav-link" id="nav-abstieg-tab" data-toggle="tab" href="#nav-abstieg" role="tab" aria-controls="nav-abstieg"
                aria-selected="false">
                <strong>Der Abstieg</strong>
            </a>
        </li>
        <li>
            <a class="nav-item nav-link" id="nav-fazit-tab" data-toggle="tab" href="#nav-fazit" role="tab" aria-controls="nav-fazit"
                aria-selected="false">
                <strong>Fazit</strong>
            </a>
        </li>

    </ul>
</nav>

<div class="tab-content border-dark rounded shadow-lg" id="nav-tabContent" style="padding: 1rem 1.5rem ">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
        <h3>
            <strong>Die Vorbereitung</strong>
        </h3>
        <div class="tab-pane" id="tab2">

            <a class="btn btn-primary btnNext">weiter</a>


        </div>
    </div>
    <div class="tab-pane fade" id="nav-anfahrt" role="tabpanel" aria-labelledby="nav-profile-tab">
        <h3>
            <strong>Der Anfahrtsplan</strong>
        </h3>
        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnNext">weiter</a>
            <a class="btn btn-primary btnPrevious">zurück</a>

        </div>
    </div>
    <div class="tab-pane fade" id="nav-S7" role="tabpanel" aria-labelledby="nav-contact-tab">
        <h3>
            <strong>Der Aufstieg</strong>
        </h3>
        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnNext">weiter</a>
            <a class="btn btn-primary btnPrevious">zurück</a>

        </div>
    </div>
    <div class="tab-pane fade" id="nav-gipfel" role="tabpanel" aria-labelledby="nav-contact-tab">
        <h3>
            <strong>Der Gipfel</strong>
        </h3>
        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnNext">weiter</a>
            <a class="btn btn-primary btnPrevious">zurück</a>
          
        </div>
    </div>
    <div class="tab-pane fade" id="nav-abstieg" role="tabpanel" aria-labelledby="nav-contact-tab">
        <h3>
            <strong>Der Abstieg</strong>
        </h3>

        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnNext">weiter</a>
            <a class="btn btn-primary btnPrevious">zurück</a>



        </div>
    </div>
    <div class="tab-pane fade" id="nav-fazit" role="tabpanel" aria-labelledby="nav-contact-tab">
        <h3>
            <strong>Fazit</strong>
        </h3>
        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnPrevious">zurück</a>

     


        </div>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
    crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>

相关问题
最新问题