Custom Navigation Buttons in Bootstrap

I am trying to add a "next" and "previous" button to my Bootstrap Nav on my website. I have attempted this suggestion, but it ended up not updating my nav-tabs correctly and interfering with some of the bootstrap scripts that were in use.

This is the current state of what I have:

 <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>Preparation</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>Directions</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>The Climb</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>The Summit</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>The Descent</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>Conclusion</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>Preparation</strong></h3>
            
            <a class="btn btn-outline-primary btnNext" >next</a>
        </div>
        <div class="tab-pane fade" id="nav-anfahrt" role="tabpanel" aria-labelledby="nav-profile-tab">
            <h3><strong>Directions Plan</strong></h3>
             <a class="btn btn-outline-primary btnPrevious" >back</a>
            <a class="btn btn-outline-primary btnNext" >next</a>
        </div>
        <div class="tab-pane fade" id="nav-S7" role="tabpanel" aria-labelledby="nav-contact-tab">
            <h3><strong>The Climb</strong></h3> 
            <a class="btn btn-outline-primary btnPrevious" >back</a>
            <a class="btn btn-outline-primary btnNext" >next</a>
            
        </div>
        <div class="tab-pane fade" id="nav-gipfel" role="tabpanel" aria-labelledby="nav-contact-tab">
            <h3><strong>The Summit</strong></h3>
             <a class="btn btn-outline-primary btnPrevious" >back</a>
            <a class="btn btn-outline-primary btnNext" >next</a>
            
        </div>
        <div class="tab-pane fade" id="nav-abstieg" role="tabpanel" aria-labelledby="nav-contact-tab">
            <h3><strong>The Descent</strong></h3>
             <a class="btn btn-outline-primary btnPrevious" >back</a>
            <a class="btn btn-outline-primary btnNext" >next</a>
        </div>
        <div class="tab-pane fade" id="nav-fazit" role="tabpanel" aria-labelledby="nav-contact-tab">
            <h3><strong>Conclusion</strong></h3>
             <a class="btn btn-outline-primary btnPrevious" >back</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>

javascripthtmlcssbootstrap-4

Answer №1

$('.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>Preparation</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>Approach</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>The Ascent</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>The Summit</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>The Descent</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>Conclusion</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>Preparation</strong>
        </h3>
        <div class="tab-pane" id="tab2">

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


        </div>
    </div>
    <div class="tab-pane fade" id="nav-anfahrt" role="tabpanel" aria-labelledby="nav-profile-tab">
        <h3>
            <strong>The Route Map</strong>
        </h3>
        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnNext">continue</a>
            <a class="btn btn-primary btnPrevious">back</a>

        </div>
    </div>
    <div class="tab-pane fade" id="nav-S7" role="tabpanel" aria-labelledby="nav-contact-tab">
        <h3>
            <strong>The Ascent</strong>
        </h3>
        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnNext">continue</a>
            <a class="btn btn-primary btnPrevious">back</a>

        </div>
    </div>
    <div class="tab-pane fade" id="nav-gipfel" role="tabpanel" aria-labelledby="nav-contact-tab">
        <h3>
            <strong>The Summit</strong>
        </h3>
        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnNext">continue</a>
            <a class="btn btn-primary btnPrevious">back</a>
          
        </div>
    </div>
    <div class="tab-pane fade" id="nav-abstieg" role="tabpanel" aria-labelledby="nav-contact-tab">
        <h3>
            <strong>The Descent</strong>
        </h3>

        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnNext">continue</a>
            <a class="btn btn-primary btnPrevious">back</a>



        </div>
    </div>
    <div class="tab-pane fade" id="nav-fazit" role="tabpanel" aria-labelledby="nav-contact-tab">
        <h3>
            <strong>Conclusion</strong>
        </h3>
        <div class="tab-pane" id="tab2">
            <a class="btn btn-primary btnPrevious">back</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loop through and store data in Node.JS within an array

Initially, I attempted to use a simple for loop to iterate through the data. However, this approach didn't work due to the nature of request.save being a function. After some experimentation, I decided to utilize forEach instead. Everything seemed to ...

javascriptnode.jsmongodb

Performance problem with 'Point-along-path' d3 visualization

I recently explored a d3 visualization where a point moves along a path, following the code example provided at https://bl.ocks.org/mbostock/1705868. During this movement, I observed that the CPU usage ranges from 7 to 11%. In my current project, there ar ...

javascriptperformanced3.jstransition

Floating elements can be vertically aligned with spans

I am facing an issue with aligning three spans vertically inside a div. It seems simple to achieve, but vertical alignment is not working properly when I use float. My goal is to have the light blue bar vertically centered. Here is the code snippet: .co ...

htmlcsspositionalignmentvertical-alignment

Issue with .env file access token: Successfully working for one API in Next.js, but failing for

I am utilizing two different APIs, WordsAPI and Spotify API. Each API requires an access token or key which I have stored in a secure .env file. I have successfully fetched data from WordsAPI using the same method in getStaticProps, but I am facing issues ...

javascriptreactjsenvironment-variablesnext.jsspotify

The CSS3 Animation must come to a halt once it reaches the 75% mark

Is there a way to pause a CSS3 animation at 75% and prevent it from resetting to 0% when completed, or alternatively add a 10-second delay at 75%? Currently, the animation restarts at 0% once it reaches 100%. div { width: 100px; height: 100px; bac ...

csscss-animations

My attempt to use the Redux method for displaying data in my testing environment has not yielded

I've been attempting to showcase the data in a Redux-friendly manner. When the advanced sports search button is clicked, a drawer opens up that should display historical data when the search attributes are selected. For this purpose, I implemented the ...

javascripthtmlcssreactjsredux

Apple on High Sierra page demonstrated an innovative use of grid parallax

I am attempting to create a unique parallax effect within a two-sided grid design. Apple's High Sierra page features an interesting parallax effect. ( ) Take a look at this image showcasing the parallax effect in action In this setup, the right sid ...

javascriptjqueryparallax

What is the best way to adjust star ratings in a database table after a page refresh using JavaScript?

I am looking to provide users with the ability to change the rating value of a product, but I'm encountering issues with it not working after the page is refreshed. For instance, a user can freely change the rating value of a new product multiple time ...

javascriptphpjquery

How can you adjust the zoom level to 100% on an Android Webview?

Using Anddown to convert markdown to HTML and wanting to display it in a webview on a tablet screen, I encountered an issue. The webview, within a fragment, takes up half the screen in landscape mode. The challenge was getting the HTML content to appear a ...

androidhtmlwebview

Incorporating jQuery into my HTML code

Struggling to integrate my jQuery script into my index.php file, seeking assistance. The script in question is called script.js $("#toggle-content").click(function () {$("#mel").slideToggle(); }); ...

jqueryhtml

Unable to retrieve valid inputs from text fields by utilizing jQuery selectors

Extracting information from text fields is my goal. Specifically, these fields contain dates which consist of three parts: the year, month, and day. The dates are divided into two sections - the first date and the last date, serving as boundaries for a sea ...

javascriptjqueryjquery-selectors

Navigating through JSON arrays can be achieved by utilizing iteration techniques

I'm having trouble with a script and can't figure out how to make it display in the designated div. It may have something to do with how I'm handling the response. In Chrome devtools, the response looks like this: { "[\"record one& ...

javascriptjqueryarraysjson

Transmitting data as an array using JQuery

$('[data-toggle="mftapproveCheck"]').click(function () { var selected = $("#checkboxes input:checked").map(function (i, el) { return el.value; }).get(); //alert("selected = [" + selected + "]\nas int = \"" + selected.join(";") ...

javascriptjqueryasp.net-mvc

What is the reason for the presence of white space surrounding the div element

In the td element, I have four nested div elements. However, there seems to be a small margin or space created between them that I cannot figure out how to remove. If this spacing is due to the behavior of the inline-block, then how can I override it? ...

css

Horizontal scrollbar appearing on larger screens

My website utilizes bootstrap and some custom css. I have a specific css class named "full-width" designed to break out of the parent bootstrap "container" in order to make the background color extend across the entire width of the screen. However, I recen ...

htmlcss

How to perfectly align a full-width div with a div of specific width

Consider this scenario: .d1 { width: 100px; float: left; } .d2 { width: auto; float: left; } <div class="d1">Fixed Content</div> <div class="d2">This content should expand to fill the rest of the page vertically.</div> This setu ...

csshtml

Ways to extract the numerical values from user inputs and store them in an array using vanilla JavaScript

My goal is to extract and separate different numbers from an array as each number holds a unique significance. To achieve this, I am retrieving input values where the numbers are separated by spaces (" "), then attempting to split them so that each number ...

javascriptarrays

Using JavaScript, generate ten clickable circles on the screen. Each circle should display the number of times it has been clicked in the center when interacted with

I am currently working on my JavaScript skills and would like to implement a fun project involving 10 colorful circles. While I can easily create these circles using HTML and CSS, I require assistance with the interactive functionality using JavaScript. ...

javascripthtmlcss

Steps for displaying a JSX component for every element in an array

I have a requirement to display a unique jsx component for each element in an array. import { ListView } from './components'; // Custom component const array = ["item1","item2","item3"]; export default function App ...

javascriptreactjs

Having trouble retrieving JSON data from an external source

I'm currently facing a challenge where I am unable to fetch JSON data from a webpage despite multiple attempts. I keep encountering the following errors: Uncaught SyntaxError: Unexpected token : or XMLHttpRequest cannot load URL. No 'Access-Co ...

javascriptjqueryjson