Tips for transforming a navigation link pill into a hyperlink:

I am using a Bootstrap Nav-pills with 2 tabs:

<ul class="nav nav-pills nav-fill kt-portlet__space-x" role="tablist">
    <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#menu11"><span> TAB1</span></a>
    </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#menu21"><span>TAB2</span></a>
    </li>
</ul>

Within TAB2, I have a button and I would like it to navigate back to TAB1 when clicked. Is this possible?

I attempted the following:

<input type="button" data-toggle="pill" href="#menu11" value="GO TO TAB1">

Although it opens TAB1, the tab is not marked as active (the "active border" remains on TAB2). Furthermore, when returning to Tab2, the functionality is lost. Any suggestions?

cssbootstrap-4nav-pills

Answer №1

This is what I received:

$(function(){

    $('#opencard').click(function(e){
        e.preventDefault();
        $('#deck a[href="#menu11"]').tab('show');
    })

})

  • make a Button with an ID of OpenCard
  • modify with an ID of Deck
It's functioning perfectly! :D

Answer №2

To achieve the desired outcome, JavaScript will be necessary. It is important to remove the data-toggle="pill" attribute from the button in your example. In this case, #theButton refers to the specific button intended for tab switching.

$('#theButton').on('click', function(e) {
  e.preventDefault();
  $('#menu11').tab('show');
});

Additionally, consider incorporating some accessibility features into each nav-link:

role="tab" aria-controls="menu21" aria-selected="false"

Make sure to replace the values of aria-controls and aria-selected with the correct information for each respective tab.

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

Use jQuery to permit only numeric characters and the symbol "-" to be entered into a textbox

I have been working on a JQuery script that only allows users to input numbers in a text field. However, I am now trying to modify the code to also allow users to enter "-" (hyphen), but so far it's not working as expected. If anyone can provide assis ...

javascriptjqueryhtmlcss

Tips for positioning and styling submenu on dropdown using CSS

I am facing an issue with my navigation menu in the design. The sub menu is not displaying when hovered. Is there a solution to fix this problem? Could it be due to missing CSS styles? nav ul {list-style-type: none; overflow: hidden; background: #000; p ...

htmlcss

Inquiring about how to make the pieces move on the checker boards I created

I'm having trouble getting my SVG pieces to move on the checkerboard. Can someone please help me figure out how to make them move, even if it's not a valid move? I just want to see them in motion! The important thing is that the pieces stay withi ...

javascriptjqueryhtmlcssnode.js

Guide on linking an e-commerce template with a database

I recently downloaded a website template for an online store from this link: I am eager to create my own e-commerce store. Can anyone guide me on how to connect this website to a database so that users can register, login, and I can manage the product cat ...

htmlbootstrap-4

The excessive width of the navigation bar resulted in additional blank space on the right side of

My navigation bar is causing me trouble as it appears to be too wide, creating extra space on the right side. I've tried adjusting the width with some code, but as I'm working on making the site responsive, shrinking the code down to around 320px ...

htmlcssnav

Implementing a file input with btn-outline styling using Bootstrap

In my bootstrap form, I have an input file that I want to style like a btn-outline-info. Here is the code snippet: <div class="btn btn-outline-info btn-lg"> <input id="signedAgreementFile" type="file" class="form-control-file"> </di ...

htmlcssinputbootstrap-4

New alternative for form-control-feedback in Bootstrap 4

The form-control-feedback class doesn't appear to be included in Bootstrap 4. What is the most effective way to achieve the desired outcome (an icon inside the textbox) using Bootstrap 4? <head> <link rel="stylesheet" href="https://max ...

csstwitter-bootstrapbootstrap-4

Creating column gaps that remain consistent when resizing a webpage is essential for maintaining a clean and organized layout

Visit my current site [This is the HTML code for my website:][2] <div class="column-box" style="width: 100%"></div> <div id="column1" style="float:left; margin:15; width:33%;"> <p>Sara Adams<br> I am a Web Developer and C ...

htmlcss

Tips for resolving unforeseen issues stemming from a CSS selector

Currently, I am diving into the world of SASS and experimenting with building webpages using this preprocessor. However, I encountered some errors in the CSS file generated from the SASS file. Below is the snippet of CSS code that is causing the issue: .l ...

htmlcsssass

Excessive CPU/GPU usage caused by CSS transition animations

I am currently working on a small element on my website that involves a random size change in one of the DOM elements. const theDiv = document.getElementById("the-div"); function animate(){ const value = Math.floor(Math.random() * 200); theDiv.sty ...

htmlcssperformancecss-transitions

trigger opening a bootstrap modal programmatically

I have a modal setup using Bootstrap with the code below: <div className="modal fade" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true" > &l ...

javascriptreactjsbootstrap-4

The selection will remain hidden and attempting to make a choice will be ineffective

Received an HTML sample from another company () and now I am attempting to create a web form based on it (). Using the same scripts, the basic structure mirrors the sample closely. After meticulously comparing the code, I can't find any discrepancies. ...

javascriptjqueryhtmlcssforms

How can I utilize Bootstrap 4 to ensure that an image remains centered on the page even when the page size is adjusted?

Looking to insert a thumbnail in front of a video using Jquery. I managed to add the image, but facing an issue when resizing the page as the thumbnail should be centered. Here is the desired layout: https://i.sstatic.net/IDOb9.png However, my current res ...

cssbootstrap-4

Customizing the color of a select dropdown in Bootstrap using CSS styling

I am having difficulty changing the default blue color for Bootstrap select dropdowns. Despite trying :hover and :active selectors on both option and select, I have not been successful in making the desired changes. Could anyone provide insight regarding ...

htmlcsstwitter-bootstrapdatatables

The login image seems to be frozen on the Bootstrap dashboard of sb admin

For the last couple of hours, I've been attempting to replace the image on the login page with something different than a dog. Despite scouring through all the files, both css and scss, and updating the link everywhere, that pesky dog continues to sho ...

cssbootstrap-4

Styling the Padding of MUI Select Component in ReactJS

Currently, I am facing an issue with the Material UI Select component where I am trying to decrease the padding within the element. The padding seems to be a property of one of the subclasses .MuiOutlinedInput-input, but my attempts to change the padding h ...

cssreactjsmaterial-ui

Getting the value of a CSS Variable from Radix UI Colors with Javascript/Typescript: A step-by-step guide

Currently, I am attempting to dynamically retrieve the Radix Colors values in JavaScript. The reason for this requirement is that I generate these colors based on user input, resulting in values that are variable. As a result, I cannot hardcode the values. ...

javascriptcssreactjstypescriptradix

Define the css settings for 'html, body' in Meteor for a particular page or route

I've been working on customizing the background CSS settings for a specific route or page in my Meteor app. To achieve this, I utilized Template.template.rendered/destroyed along with jQuery selectors to inject the desired CSS once the template is ren ...

javascripthtmlcssmeteoriron-router

Animation fails to initiate when the object enters the viewport

I attempted to inject some enchantment into my project by implementing code from a tutorial found on this CodePen. However, I encountered an issue where the code only functions properly within that specific CodePen environment. Even after copying the same ...

javascriptjqueryhtmlcssviewport

Achieve image alignment to the left, center, and right without relying on float properties

Can three images be positioned in a row to the left, middle, and right using only text-align instead of float? ...

htmlcss