Switch to a different tab using Bootstrap's navigation tabs and display the corresponding content

I have a regular bootstrap tab panel that allows me to switch between blocks

In List 1's content, I included a button called Go to List 2

However, I am struggling to figure out how to make it so that clicking on this button will switch to the List 2 tab

I've tried adding various attributes to the a tag like id and others, but it hasn't been successful

li {
  margin: 0;
  display: block;
}

li:before {
  display:none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
}

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
}
.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  background: #A700FF;
  border-radius: 10px;
}

.info {
  padding: 30px;
  text-align: center;
}

.go-to {
  margin: 0 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9f9292898e898f9c8dbdc8d3cdd3cc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d233d22">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation"> <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active">List 1</a> </li>
    <li role="presentation"> <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false" class="">List 2</a> </li>
    <li role="presentation"> <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false" class="">List 3</a> </li>
    <li role="presentation"> <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false" class="">List 4</a> </li>
</ul>
<div class="tab-content">
    <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
    <div class="info">List 1 info</div>
    <a href="#list2" class="go-to">Go to List 2</a>
  </div>
    <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
    <div class="info">List 2 info</div>
  </div>
    <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
    <div class="info">List 3 info</div>
  </div>
    <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
    <div class="info">List 4 info</div>
  </div>
</div>

javascripthtmljquerycssbootstrap-5

Answer №1

  1. I have modified the id to "goToList2" for your button labeled as "Go to List 2", allowing you to target it using JavaScript/jQuery.

  2. Utilized jQuery to simulate a click event on the List 2 tab upon clicking the button.

Upon clicking the button, it activates a click event on the List 2 tab, thereby highlighting it and showing its content.

Please review the code snippet to ensure accuracy.,

li {
  margin: 0;
  display: block;
}

li:before {
  display:none;
}

.nav {
  border-radius: 10px 10px 0 0;
  justify-content: center;
}

.nav > li > a {
  margin-top: 10px;
  padding: 10px 40px;
  display: block;
}

.nav-tabs > li > a {
  font-size: 18px;
  color: black;
  border: none;
  text-decoration: none;
}
.nav-tabs > li > a.active {
  margin: 10px 0;
  color: white;
  background: #A700FF;
  border-radius: 10px;
}

.info {
  padding: 30px;
  text-align: center;
}

.go-to {
  margin: 0 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d1cad4cad5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a544a55">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation"> <a href="#list1" id="list1-tab" data-bs-toggle="tab" data-bs-target="#list1" role="tab" aria-controls="list1" aria-selected="true" class="active">List 1</a> </li>
        <li role="presentation"> <a href="#list2" id="list2-tab" data-bs-toggle="tab" data-bs-target="#list2" role="tab" aria-controls="list2" aria-selected="false" class="">List 2</a> </li>
        <li role="presentation"> <a href="#list3" id="list3-tab" data-bs-toggle="tab" data-bs-target="#list3" role="tab" aria-controls="list3" aria-selected="false" class="">List 3</a> </li>
        <li role="presentation"> <a href="#list4" id="list4-tab" data-bs-toggle="tab" data-bs-target="#list4" role="tab" aria-controls="list4" aria-selected="false" class="">List 4</a> </li>
    </ul>
    <div class="tab-content">
        <div id="list1" role="tabpanel" aria-labelledby="list1-tab" class="tab-pane active">
            <div class="info">List 1 info</div>
            <a href="#" class="go-to" id="goToList2">Go to List 2</a>
        </div>
        <div id="list2" role="tabpanel" aria-labelledby="list2-tab" class="tab-pane">
            <div class="info">List 2 info</div>
        </div>
        <div id="list3" role="tabpanel" aria-labelledby="list3-tab" class="tab-pane">
            <div class="info">List 3 info</div>
        </div>
        <div id="list4" role="tabpanel" aria-labelledby="list4-tab" class="tab-pane">
            <div class="info">List 4 info</div>
        </div>
    </div>

    <script>
        // jQuery code to switch to List 2 when the button is clicked
        $(document).ready(function () {
            $("#goToList2").click(function () {
                $("#list2-tab").tab("show");
            });
        });
    </script>
</body>
</html>

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

Spotting repeated terms within an HTML document

I have a table with results generated using v-html (meaning the text inside the table does not appear until the page is rendered). I want to compare two rows and highlight any duplicate words they may contain. While looking for examples, I came across a p ...

javascriptjqueryhtmlcssvue.js

What is the process for determining the destination of my form data in HTML?

I recently created a form for my website, but I'm unsure of how to set it up so that the information submitted goes somewhere. After scouring various forums, it seems like I need to generate a PHP page. Can someone provide me with tips on how to get s ...

phphtmlformslocation

Guide on implementing vuechartkick in a Nuxt.js project

In the directory /plugin/vue-chartkick, I created a vuechartkick plugin. import Vue from 'vue' import Chartkick from 'vue-chartkick' import Chart from 'chart.js' Vue.use(Chartkick.use(Chart)) This is the nuxt template sectio ...

javascriptvue.jschart.jsnuxt.js

This error is thrown when trying to access the property 'message' of an undefined value

I'm currently working on adding an AJAX contact form to my website. However, I've run into a problem where when I try to submit the form, I encounter the following error in Google Chrome: "Uncaught TypeError: Cannot read property 'message&a ...

javascripthtmlajaxgoogle-chrome

Tips for eliminating the bottom border on a nav-tab in Bootstrap 4

When a vertical navigation menu item is selected, a border appears below the item. How can I remove this border? .nav-tabs li, .nav-tabs li a { border-bottom: none; } Here is a picture of the border: ...

cssbootstrap-4

Enabling a variable to encompass various types within ReactJS

In my code, I have defined two distinct types as follows: type A = $ReadOnly<{ a: ?$ReadOnlyArray<string>, b: ?string, }>; and type B = $ReadOnly<{ c: ?$ReadOnlyArray<boolean>, d: ?number, }>; Now, I am looking to create a ...

javascriptreactjs

Ways to transfer property values between two instances of a component

Two datepicker components are present, one for "From" date and another for "To" date. If the "To" date is empty, I want to automatically update it with the value from the "From" date. I have considered using 'emit' on the value but I am unsure ...

javascriptvue.jsvuejs2

Using PHP script to retrieve MySQL table values and dynamically update a live graph in a Javascript function

I've been researching similar issues for quite some time now, but to no avail. Currently, I'm utilizing Highcharts to update a graph every 3 seconds with the latest entry from a specific MySQL table. I am referring to the example Javascript code ...

javascriptphpmysqlhighchartslivegraph

Utilizing Jquery Ajax to Access WCF Service

I have been struggling to create a WCF service and make AJAX calls to its methods using jQuery. Despite reading solutions on Stack Overflow, I am still unable to resolve the issue. Any assistance would be greatly appreciated. The code snippet I have is as ...

c#jqueryajaxjsonwcf

React-Redux showing no errors despite non-functional Redux store

I'm currently facing an issue with integrating React-Redux into my React Native/Expo project. Despite not receiving any console error messages, the data from the Redux store is not displaying in the user interface. Below are some key files related to ...

javascriptreactjsreact-nativereduxreact-redux

Tips for storing a JavaScript string on a server using PHP and retrieving it at a later time

Let's simplify the issue I'm facing: I have a function that gets triggered when a button is clicked: $search.onclick = function () { // Assuming the user enters a valid document name, like "John" documentname = $('#userinput' ...

javascriptphpjquerymysqlajax

What causes two identical pages to display fonts in different ways?

Two identical pages, hosted on the same server with the exact same Apache configuration and home directory. Each page contains only one sentence of text, unstyled. The strange thing is, when viewed in Chrome and Safari, the fonts render differently, while ...

css

Flexbox allows you to easily manage the layout of your website

I am currently working on a CSS project and have encountered an issue. Whenever I apply the "display: flex" property to the .student element, the border around it mysteriously doubles. The reason for wanting to use the flex property is to align the text ve ...

htmlcssflexbox

Why are static PropTypes used in ReactJS and do they offer any solutions or are they merely a recurring design choice?

While delving into the code base of a web application, I came across some static PropTypes that left me questioning their purpose and necessity. Here is a snippet of the code in question: static propTypes = { fetchCricketFantasyPlayers: PropTypes.fun ...

javascriptreactjs

The inner HTML functionality in Angular 2 seems to be malfunctioning when dealing with HTML tags

I am facing an issue with an array that includes displayName with HTML tags: this.topicsList = [ {id: "173", name: "Discussion1", displayName: "Discussion1", status: 1}, {id: "174", name: "discussion123", displayName: "discussion123", status: 1}, {id: "19 ...

javascripthtmlangular2-templateangular2-formsinnerhtml

Having trouble getting the Random Function to function correctly in Discord.js

I'm working on a piece of code that generates a random value to select two different values from two separate arrays. Every time I run it, however, the result seems to be the same and not truly random. I'm not sure where I went wrong with this. I ...

javascriptnode.jsnumbersdiscorddiscord.js

Dynamic back text breaks data-auto-height in Foundation 6.5 Drilldown

After implementing a little trick to dynamically set the parent Item Text for the "back" Button in Drilldown Submenus, I encountered an issue. It seems that using "back.text(parent.text())" is causing some trouble with the auto height calculation. Consequ ...

jqueryzurb-foundation

The tags are showing unexpected strings after the v-for directive

Currently, I am in the process of designing a new web page using Vue on Nuxt to replace the existing one (using VScode). However, I have encountered an issue while utilizing v-for to generate lists. Within the tag, there is an unknown string(attribute) tha ...

javascriptvue.jsnuxt.js

Problem with translating a variable into a selector in JQuery

When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue ...

javascriptjqueryhtmlcss

Exploring the contrasts in employing functions within a react-native environment

Imagine having a component called "wo" that receives a function as a parameter. export default class SomeComp extends Component { constructor(props) { super(props); } _someFunc = () => { return ... } render() { ...

javascriptreactjsreact-native