Is it possible to have Bootstrap 3 Navigation Tabs positioned at both the top and bottom of a

While working on a Bootstrap 3 website, I discovered that it is possible to have both a top nav-tab and bottom nav-tab section on the same page. These two distinct tab menus can control the display of the same tab content areas.

However, I encountered an issue with this setup. The tabs operate independently from each other. I would like the top and bottom tabs to sync up and show the same active tab. Currently, if you click tab 4 in the top menu, it will switch to tab 4, but the bottom menu still displays tab 1 as active.

Would anyone happen to know if Javascript/Jquery can address this problem? I simply need both menus to function as one cohesive unit.

Thank you in advance for any assistance.

<div class="tabbable tabs-below">

This should mirror the functionality of the top nav tabs.

http://jsfiddle.net/UT6ex/1/

javascriptjqueryhtmlcsstwitter-bootstrap-3

Answer №1

If you want to ensure that your setup remains intact even with future Bootstrap updates, listen to the events triggered by the Bootstrap Tab class such as show.bs.tab and shown.bs.tab instead of relying on raw clicks.

This snippet of code demonstrates how to manipulate <li> elements based on the shown event using jQuery (view working JSFiddle):

$('a[data-toggle="tab"]').on('shown.bs.tab',
  function(event) {
    var $relatedTarget, $target;

    if (event.relatedTarget != null) {
      $relatedTarget = $(event.relatedTarget);
      $('a[data-toggle="' +
        $relatedTarget.attr('data-toggle') +
        '"][href="' +
        $relatedTarget.attr('href') +
        '"]').parent('li').removeClass('active');
    }

    if (event.target != null) {
      $target = $(event.target);
      $('a[data-toggle="' +
        $target.attr('data-toggle') +
        '"][href="' +
        $target.attr('href') +
        '"]').parent('li').addClass('active');
    }
  }
);

Answer №2

This code seems to do the trick:

$('.nav-tabs').find('li').on('click', function(){
    var location = $(this).find('a').attr('href'),
    children = $('.nav-tabs').find('li'),
    links = children.find('a');
    links.each(function() {
        var mi        = $(this),
            miHrefs   = mi.attr("href"),
            miParents = mi.closest('li');

        miParents.removeClass('active');
        if(miHrefs == location) 
        {            
            miParents.addClass("active");
        }
    });  
})

It appears to be functioning well. See it in action here http://jsfiddle.net/UT6ex/4/.

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

I'm having trouble with the margin-right property in my HTML code. What's the best way to align my content

Currently, I have been delving into the world of Responsive Design. However, I am encountering some difficulties in positioning my content centrally when the screen size increases. The issue is as follows: @media screen and (min-width: 950px) { body ...

htmlcssresponsive-design

Transform a row into a clickable element

I am currently working on a social media platform where users can search for venues stored in the database. In my search.php file, I have implemented a text box that dynamically loads venue names from the database into a venuesearch div as the user types. ...

phpjavascriptajax

Updating the button text in Angular 7

Here's a question: <button (click)="activateMotion(1)"> <img class="emotion-icon" id="positive-icon" src="" /> </button> <button (click)="activateMotion(-1)"> <img class="emotion-icon" id="negative-icon" src="" /&g ...

javascriptjqueryangularangular6angular7

The website is failing to adapt properly to smaller screen sizes

I would share some code here, but it might be easier for you to just check out the URL instead. The issue is that the website was responsive across different screen sizes at first, but after making some changes in the CSS and HTML, it's not working pr ...

htmlcss

What is the proper way to initialize static variables in a JavaScript static class?

Within my javascript code, there exists a static class... var Logger = { logtofirefox: function (str, priority) { console.log(str); }, logtoie: function (str, priority) { alert(str); } } When invokin ...

javascript

Is there a framework available to animate Pseudo CSS elements?

Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...

javascriptcssjquery-animate

CORS policy blocked Deepl API request

For the past few months, I successfully integrated Deepl API into our Web CRM. However, things took a turn a few days ago. I can't pinpoint exactly when, but it might have been since the start of the new year. Now, every request is being blocked by s ...

jqueryajaxcorsdeepl

In MongoDB, learn the process of efficiently updating nested objects in a dynamic manner

We have a variety of nested configurations stored in MongoDB. Initially, we store the following object in MongoDB: const value = { 'a': { 'b': 1 } } collection.insertOne({userId, value}) Now, I would like to modify the object in ...

javascriptmongodbmongodb-query

Having trouble making the image appear in a relative position

I am struggling to figure out why my figcaption is not positioning correctly. My image is set to relative position. Meanwhile, my figcaption has been set to absolute positioning. This should mean that the figcaption with a bottom: 60px should be positio ...

htmlcsssass

I am looking to modify the ID of the select element nested within a td tag

This is the code snippet I am working with: <tr> <td class="demo"> <label>nemo#2 Gender</label> <select id="custG2" required="required"> <option>....</option> <option>M</option> ...

javascriptjqueryajaxhtml

Displaying a highchart once a form has been submitted in a separate file

Can someone assist with this issue? I am trying to display a Highchart from file_2 in file_1 using PHP, jQuery, and AJAX. Below is the script I am working with: SCR_test02.php <?php require "function.inc.php"; //require "showscr.php"; include "c ...

javascriptphpjqueryajaxhighcharts

Exploring ways to access elements within shadow-root (open) in Angular using SVG.js

I'm currently tackling a project involving Angular Elements. Within this specialized component, my goal is to incorporate SVG.js 3+. However, due to the necessity of utilizing ViewEncapsulation.ShadowDom in my component, I am encountering challenges w ...

javascriptangulartypescriptshadow-domsvg.js

Alter the color scheme using jQuery

Exploring the world of websites, I've come across many with a unique color switch feature. Users have the ability to choose a color, and the entire page transforms to match their selection. Check out these links for some examples... http://csmthe ...

javascriptjquerycssplugins

Preserve HTML client control values during page reloads

Is there a more efficient way to retain client-side HTML controls on postback? I've attempted using enableviewstate="true", but it didn't work. My current workaround involves creating a server-side function that resets all posted values using Cli ...

c#asp.nethtmlpostbackviewstate

What is the method for verifying authentication status on a Next.js page?

I'm struggling to understand why the call to auth.currentUser in the code snippet below always returns null. Interestingly, I have another component that can detect when a user is logged in correctly. import { auth } from "../lib/firebase"; ...

javascriptfirebase-authenticationnext.js

Tips for extracting text from a specific div using jQuery

Hey there, thanks for taking the time to read this message. I have some HTML code below: <div id="ImagePagination" class="Pagination"> Photo <span id="currentPhotoCount"><#currentPhotoCount#> </span> of <span i ...

jquery

Find unique numbers within a specified range using NodeJS

I need to update my arts on an NFT test via OpenSea API, but I'm facing an issue where the numbers are being repeated. Is there a way to select a number within a range that does not repeat? Here is my current code: const opensea = require("opense ...

javascriptnode.jsnft

Tips on using the Unix "paste" command in Node.js without the need to load entire files into memory

Implementing the basic Unix paste command in Python is straightforward, as shown in the following snippet (which currently processes two files, unlike Unix paste that can handle multiple files): def pasteFiles(file1, file2): with open(file1) as f1: w ...

javascriptnode.js

Issuing a straightforward GET request results in a significant delay in receiving a response

I have a simple app running on Node.js, Handlebars, and Express. The main page features a single button that triggers an asynchronous GET request when clicked, causing a console.log message to display. Initially, the first click on the Submit button shows ...

javascripthtmlnode.jsexpressasynchronous

Determining the file size of an HTML and JavaScript webpage using JavaScript

Is there a way to determine the amount of bytes downloaded by the browser on an HTML+JS+CSS page with a set size during page load? I am looking for this information in order to display a meaningful progress bar to the user, where the progress advances bas ...

javascripthtmlcss