"Enhance your user interface with Bootstrap tabs featuring a convenient next arrow for navigating

Seeking assistance with updating Bootstrap tabs to the latest version (Bootstrap 4). The current source code can be found here: https://codepen.io/srees/pen/pgVLbm

The issue lies in the fact that it utilizes Bootstrap 3 and lacks tab content.

I am aiming for a layout similar to this image: https://i.sstatic.net/G30Vz.png

If there are multiple tabs, users should be able to click an arrow to slide between them, akin to browsing tabs in a web browser.

This is the desired functionality I am striving to achieve:

  
 <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
javascripthtmlcssbootstrap-4

Answer №1

Hopefully, this solution proves to be beneficial for you

Add the attribute data-id to anchor tags with numerical values

HTML Home Home Home

JQuery

$(document).ready(function(){
   var maxTabs = $(".nav-item").length; //Determining total number of Tabs
   $("#next").click(function(e){
       e.preventDefault();
       var activeAnchor = $("ul").find("a").hasClass("active"); //Locating the anchor tag with 'active' class
       // Alternatively: var activeAnchor = $("li > a").hasClass("active");
       if(activeAnchor === true){ // Checking if any "a" has 'active' class
            $(this).removeClass("active"); //Removing 'active' class from the current element
            var current = $(this).attr("data-id"); //Retrieving the data-id of the current element
            if(current < maxTabs){ // Verifying if the id is not the last one
                var nextId = current + 1; //Incrementing by 1 to obtain the next element's id
                $("#nextId").addClass("active"); //Applying the 'active' class to the next element
            }
       }
   });
});

Please inform me about the outcome. If you face any issues, particularly on line 

$(this).removeClass("active");
, feel free to reach out for an alternative approach.

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

Compel the browser to launch a fresh tab

I'm currently working on an app that involves uploading files. One issue I'm facing is that the file system pop up doesn't close after the upload, causing a quarter of the screen to be covered while the test keeps running in the background. ...

javascriptangularjsseleniumautomationprotractor

Arranging Array by Nearest Solution

I need help sorting an unsorted array containing calculation results: const solution = 955 const unsortedArray = [ [["solution result cab"],[955.709]], [["solution result abc"],[951.11]], [["solution result cba"],[954.709]], [["solution result bac ...

javascriptarrayssortingmultidimensional-array

Populate Dropdown menu using JSON data

-- Controller -- [WebMethod] public ActionResult GetSellers() { List<Seller> sellers = db.Sellers.ToList(); return Json(sellers, JsonRequestBehavior.AllowGet); } -- View -- @Html.DropDownListFor(x => x.SellerId, new SelectList(Enumerab ...

javascriptasp.netjsonasp.net-mvc-5.2

Safari is capable of rendering Jquery, whereas Chrome seems to have trouble

The code I am using renders perfectly in Safari but not in Chrome. Despite checking the console in Chrome, no errors are showing up. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="ht ...

javascriptjquerygoogle-chromesafari

Guide on extracting data from a JavaScript table using Python

Looking to extract information from a table on this page: . There are a total of 18 pages, but the url remains constant for each page. My usual method involves using BeautifulSoup to scrape data from HTML pages. However, in this case, the required data is ...

javascriptpythonhtmldatatable

Launch a fresh fancybox once the previous one has exited

I am currently facing an issue with my password change process through a fancybox window. Whenever a user enters the wrong password, a "Wrong Password" iframe opens up. However, the challenge arises when I try to reopen the "Password Change" iframe after c ...

javascriptjqueryiframefancybox

Building a versatile and interactive table using AngularJS with data sourced from a

I am currently working on creating a dynamic table using Angular JS to display data received from a Spring Rest Service. Here is the code snippet I have been working with: // JavaScript Document var app = angular.module("SDLC", []); app.config([&apos ...

javascriptjqueryjsonangularjsdynamic

Attempting to adjust the width upon hovering with CSS

I have attempted this previously and cannot figure out why it is not functioning properly. I am attempting to do the following: http://jsfiddle.net/geometron/u3M6r/1/ <ul> <li><a href="content1.html"> Demo 1 </a></li> ...

cssanimation

Is there a method to verify if a GeoJSON feature is in the shape of a rectangle and locate its corner coordinates?

I am looking for a way to identify all the corner coordinates of GeoJSON features that are in rectangular or square shape. Some of the features have more than five coordinates but still represent a rectangle or square shape. Is there an algorithm or third- ...

javascriptjsonnode.jsgisgeojson

Steps for inserting a video into a new div upon selecting a hyperlink

Looking for a way to link menu elements to corresponding videos in adjacent divs? I have two divs set up - one with the menu list and another right next to it where the videos should be loaded. Forms seem like a potential solution, but I lack expertise i ...

javascriptjqueryhtmlvideovideo-streaming

Can the jQuery Cycle Plugin: scrollHorz with Prev/Next automatically scroll without any input from the user?

Currently implementing the jQuery cycle plugin: jquery.cycle.all.min.js - newest version (2.8.8) available at http://malsup.com/jquery/cycle/ The scrollHorz effect is being used with previous and next links, functioning perfectly except for one issue: upo ...

javascriptjquerypluginscycle

How can we eliminate duplicate arrays of objects within a multi-dimensional array using ReactJS and JavaScript?

let galleryItems = [ {id: 1029, name: 'College-Annual-Day.jpg', ext: 'jpg', mime: 'image/jpeg', size: 91153, …}, {id: 1029, name: 'College-Annual-Day.jpg', ext: 'jpg', mime: 'image/jpeg', si ...

javascriptarraysreactjsnext.jsjavascript-objects

Choose specific elements based on their attribute within a class, and then either apply or remove a class

I have a project where I need to store the data information of each element in my navigation menu when a button is clicked. This project is a one-page website with two levels of navigation: Main menu Button at the bottom of each "page" Currently, I hav ...

javascriptjqueryarraysmenugetelementsbyclassname

Error Message: Unexpected character "C" found in JSON response from Ionic 2 Http GET request

Trying to execute a GET request and extract data from the response. this.http.get('http://localhost:8888/maneappback/more-items.php').subscribe(res => { console.log(res.json()); }, (err) => { console.log(err); }); An error message ...

javascriptphpjsonangularionic-framework

django problem with bootstrap modal

I'm having trouble with the Bootstrap 4 modal in my Django project. When I click the button, the fade effect covers the entire screen, but the modal doesn't appear. I'm currently using Django 1.9. Does anyone have any suggestions on what mi ...

htmlbootstrap-modalbootstrap-4

What is the proper way to define an array of objects in TypeScript?

In search of a way to define a function that accepts an array of unspecified object types, known as "anonymous types." I want to enforce strict typing with TypeScript. The objects in the array all have properties like name, price, and description. bagTotal ...

javascriptreactjstypescript

How to Test React Js API Calls with Jest?

I'm currently in the process of writing test cases for my API call function, but I'm encountering difficulties as I am unable to successfully run my tests. Below is the code for the API call function and the corresponding test cases. export async ...

javascriptreactjsunit-testingreact-testing

Best Practices for Safely Storing the JWT Client Credentials Grant

Currently, I am working on a NodeJS Express Application that connects to an Auth Server using client credentials grant. After receiving the token from the Auth Server, I use it to access data from an API. I am seeking advice on the most effective way to s ...

javascriptnode.jsexpressjwtopenid-connect

What is the best way to deliver an HTML document in Express from a directory that is one level higher than my server folder?

I am facing an issue while trying to access an HTML file from my main directory through my Express server, which is located one level deeper in the server folder. Below is the configuration of my server code: const express = require('express') ...

javascriptexpressserverfilepath

Choosing the second option is not possible after selecting from the initial drop-down menu

After some investigation, I managed to find a way to display a specific productCategory based on the selection from the first dropdown menu. https://i.sstatic.net/AsLE2.png However, when attempting to choose a productCategory, nothing seems to change. T ...

javascriptreactjsmaterial-uimern