Creating a programmatically open tab using bootstrap-native without the need for jQuery

I recently started using the bootstrap-native library for Bootstrap 4 instead of JQuery. I have a requirement to programmatically open a tab in my application. You can find more information about bootstrap-native here.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <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>

Previously, with jQuery, I would achieve this by executing:

$('#contact').tab('show')

I encountered an issue where .tab('show') doesn't work with bootstrap-native. Is there any way to accomplish this using plain JavaScript?

javascriptbootstrap-4tabsbootstrap-native

Answer №1

<! --Don't forget to add a container div -->    
<div id="Tabs" class="container"> 
    <ul class="nav nav-tabs" id="myTabs" role="tablist">
        <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="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">About</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">Home</div>
    <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="about-tab">About Us</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-    tab">Contacts</div>
    </div>
</div>

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

Issues with the functionality of the login page's HTML and JavaScript

Recently, I attempted to create a login page with the following code: const loginForm = document.getElementById("login-form"); const loginButton = document.getElementById("login-form-submit"); const loginErrorMsg = document.getElementById("login-error-m ...

javascripthtmlcss

JavaScript: Encounter issues while parsing JSON due to encountering an unexpected token error

I was able to successfully parse a JSON URL using Java code in the past, but now I need to migrate it to JavaScript. However, when attempting to parse the JSON using JavaScript, I encountered a syntax error: Unexpected token i. SyntaxError: Unexpected tok ...

javascriptjavajson

Utilizing Rails to incorporate a comment box through jquery on individual posts within a index page showcasing all listed posts

As I display a list of posts on my index file, I want each post to have its own comments section. To achieve this, I have added a "Show Comments" button for each post. However, when I click the button, jQuery triggers all comment boxes on the page instead ...

javascriptjqueryruby-on-railsfacebookcomments

Is it possible to employ ES6 modules within Node.js 8?

Is it possible to utilize ES6 module syntax with Node.js beginning from version 8? While there are other similar inquiries on this platform, the answers provided may be outdated. I am interested in knowing if the situation has evolved with the latest ve ...

javascriptnode.jsecmascript-6es6-modules

Using JavaScript in MVC4 to implement JSon

Looking to integrate JavaScript into my project... I have data stored in a database...... Retrieving it using LinQ as shown below public List<SelectListItem> getTokens() { var tokens = from T in db.tokens select T; List<Selec ...

c#javascriptjsonlinqasp.net-mvc-4

Loading Image before it's needed to improve user experience

Is there a way to preload images without adding them to the DOM? If I preload an image, will it be effectively precached? I believe that caching is done by referencing the source (src) of an image. My experiments suggest that preloading for precaching doe ...

javascriptreactjs

Can a string be transformed into HTTP POST parameters?

Below is a snippet of code where I've utilized the .serialize() method to convert all form inputs into a string, which is then sent to the server: $.ajax({ type: "post", url: wp_urls.ajax_url, data: { action: "submit_form", ...

javascriptphpjqueryajaxpost

The specified timeout elapsed without the jasmine async callback being invoked

Having recently ventured into Protractor and javascript, I've encountered a persistent error that none of the existing solutions seem to shed light on. The issue revolves around understanding async callbacks within my Page Object model implementation. ...

javascriptnode.jsangularjsjasmineprotractor

What methods can I use to obtain negative numbers through swipe detection?

In my code, I am using three variables. The first one is x which serves as the starting point, followed by myCount which counts the number of swipes a user performs, and finally, dist which calculates the distance from the initial point. I want to set myC ...

javascriptjqueryhtmlcssswipe

A Guide to Identifying and Emphasizing Duplicate Rows in Ag-Grid Using react

I'm attempting to use ag-grid in order to identify duplicate rows by comparing the id, name, and description fields. values = [ { id: 10, name: 'axel', desc: 'it's me' }, { id: 10, name: 'axel', desc: &ap ...

javascriptreactjsjsonduplicatesag-grid

creating intricate nested routes within the same Vue component by using a conditional switch case

I am currently developing a players module. Within this module, there are 3 routing cards on the initial page. Each card leads to the next page, which contains multiple routing cards related to their parent card. For Example: 1. 1st level Card(Player N ...

javascriptvue.jsvuejs2

Incorporate your own unique logo into Highchart graphs

Can custom logos or images be added to the graphs? I attempted to modify the credits label, but didn't succeed. $('#container').highcharts({ credits: { text: 'remisture.no', href: 'http://remisture.no&ap ...

javascriptcsshighcharts

Issue encountered when importing async function: Invalid hook call. Hooks are designed to be called only within the body of a function component

All I desire is the ability to access logic from my geolocationApi file in my react-native components without using a hook. Instead, I prefer normal asynchronous functions. The geolocationApi file employs a custom hook for handling mobx state updates, whic ...

javascriptreactjsreact-native

jQuery not triggering when selecting items from dropdown list

I used to have a dropdownlist in my HTML with the following code: <select id="customDropDown" name="mydropdown"> <option value="CourseIDFilter"id ="1" class ="choosefilter" >Course ID </option> <option value="CourseNameFilter" i ...

javascriptjqueryhtml

Experiencing an unexpected abundance of console logs when implementing React Hooks

I am attempting to retrieve data from an API. The desired result is being obtained, but when I attempt to log it to the console, it logs 4 times. Within my app.js, I am utilizing the fetchData function: import React, {useEffect, useState} from 'rea ...

javascriptreactjsreact-hooks

Create a new JSON property by incorporating the value of an existing property

I have a file containing JSON-serialized data structured as shown below: { "name":"Store", "children":[ { "name":"Store 1", "children":[ { "name":"collection 1", ...

javascriptarraysjson

Creating a simple chatbot using jQuery and Ajax, and implementing a feature to ignore lowercase inputs

I'm currently working on a chatbot project and I'm having some difficulties with the input identifier. if (message.indexOf("how are you")>=0){ send_message("Thanks, Iam good!"); responsiveVoice.speak("Thanks, Iam good! ...

javascriptjqueryajax

Ways to access nested keys in a TypeScript object as well as an array containing objects

As I develop a form generator, my goal is to achieve type safety for a nested object and an array of objects. Specifically, I want the 'name' property to correspond to the key of the respective object it belongs to. For instance, in the scenario ...

javascriptreactjstypescriptrecursionecmascript-6

Creating a hexagonal grid pattern with the use of texture

I have conducted several experiments in the past to determine the most effective way to create large-scale hexagon grids. I attempted drawing the hexagons using THREE.Line and THREE.LineSegments. While this method was successful for small grids, the perfo ...

javascriptthree.jshexagonal-tiles

Contrast objects and incorporate elements that are different

In my scenario, I have a list of days where employees are scheduled to work. However, on the website, I need to display the remaining days as leave. In cases where an employee has two different shifts, there can be two elements in the object. var WorkDays ...

javascript