Issue with Bootstrap tab display of content

I'm having trouble with the tabs in my page. When I click on each tab, the content doesn't display correctly. Here is my code:

<div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;">
    <ul id="myTab" class="nav nav-tabs nav-justified">
        <li class="active"><a href="#tab-home" data-value="#home" data-toggle="tab">Home</a></li>
        <li><a href="#tab-fav" data-value="#fav" data-toggle="tab">Favorites</a></li>
        <li><a href="#tab-fr" data-value="#fr" data-toggle="tab">Friends</a></li>
        <li><a href="#tab-ex" data-value="#ex" data-toggle="tab">Experience</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="tab-home">
            HOME
        </div>
        <div class="tab-pane fade active" id="tab-fav">
            My favorites
        </div>
        <div class="tab-pane fade active" id="tab-fr">
            My Friends
        </div>
        <div class="tab-pane fade active" id="tab-ex">
            My experience
        </div>
    </div>
<script type="text/javascript">
    $(function () {
        var navTabs = $('.nav-tabs a');
        var hash = window.location.hash;
        hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');

        navTabs.on('shown', function (e) {
            var newhash = $(e.target).attr('data-value');
            window.location.hash = newhash;
        });
    })
</script>
</div>

JSFIDDLE

Can anyone help me figure out what's wrong and how to fix it?

javascriptjquerycsstwitter-bootstrap

Answer №1

All tab-pane divs currently have the active class, but only the first one should have it. Also, in Bootstrap 3, the correct event is not show, but shown.bs.tab. You can find more information about Bootstrap 3 tabs here.

I personally prefer using this code: Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink. The only modification I made was replacing on('show' with on('shown.bs.tab'.

Answer №2

There seems to be an issue with the jQuery library reference missing from your JSFiddle. Adding the jQuery reference under Frameworks & Extensions should resolve the problem of tab content not switching.

According to the Bootstrap documentation, jQuery is required for bootstrap javascript features to work properly: http://getbootstrap.com/getting-started/#whats-included

Additionally, it appears that your function is using jQuery notation.

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

How to implement a self-invoking function in React JS like you would in regular JavaScript?

Is it possible to invoke the function good without triggering it from an event? I want it to run as soon as the page loads, similar to a self-invoking JavaScript function. Check out this example import React from 'react'; class App extends Reac ...

javascriptreactjsjsx

What is the process for incorporating buttons into an Angular mat-table?

I have successfully utilized Angular mat-table to showcase data retrieved from a database: view the image description here <table mat-table [dataSource]="UserDataSourceFilters" class="mat-elevation-z1 mt-5"> <ng-co ...

javascriptangulartypescriptangular-material

creating a loop to handle AJAX requests for JSON data

My JSON call successfully loads the data.root.offer[0].region data into a div with the class .region. Here is the code snippet: $.getJSON('json/data.json', function(data) { $('.region').html('<p>' + data.root.offer[0] ...

javascriptjqueryajaxjson

Autonomous JQuery Modules

Is it possible to separate the functions in JQuery and use only the ones needed by splitting the file with PHP? By doing this, I aim to improve page speed, save bandwidth, and have more control over the functions used through the backend. Can the functio ...

javascriptphpjquerycompression

What steps can be taken to prevent the browser from freezing when loading JSON via an ajax request?

Hello, I'm currently facing an issue where the dropdown and browser become locked until the ajax request is completed. I've learned that setting ASYNC to False for JSON Ajax requests should prevent this issue. Can someone please assist me in adju ...

jqueryajaxjson

Choosing a personalized component using document selector

Currently, I am working on an application using Stenciljs and have created a custom element like this: <custom-alert alertType="warning" alertId="warningMessage" hide>Be warned</custom-alert> The challenge arises when attem ...

javascripttypescriptstenciljs

Ajax continues to operate even if an error is detected

Hello fellow programmers! I'm currently facing an issue with form submission and validation using jQuery with 2 ajax events. The problem lies in the fact that even if the first ajax event (timeconflict.php) returns an error, the second ajax event (res ...

javascriptphpjqueryhtmlajax

What are the steps to incorporate @svgr/webpack into turbopack within a next.js project?

I'm encountering an issue with turbopack and @svgr/webpack in my project. According to the documentation, they should work together but it's not cooperating. When I run the project without using --turbo (turbopack), everything functions as expec ...

javascriptnext.jsturbopack

Ensuring text is perfectly centered within a div, regardless of its length

In the quest to center text of unknown length within a div, challenges arise. Constraints limit its size to a certain extent, making it unclear whether one or two lines will be needed. As such, traditional methods like line-height are not viable options. A ...

csshtmlpositioning

Showing a confirmation message to the user upon clicking outside of a specific section

On my webpage, I have a section for creating content, as well as a top bar and sidebar with internal links (both controlled by ng controllers). I am looking to implement a confirmation message that will appear if the user tries to leave the page while in t ...

javascriptjqueryhtmlangularjs

The Angular Material Table experienced a collapse when trying to render over 20 columns simultaneously

Currently, I am experiencing an issue in Angular Version 5 where the Angular Material Table collapses when rendering more than 20 columns. Here is a snapshot of what my table looks like: https://i.stack.imgur.com/MXfvQ.png https://i.stack.imgur.com/XHWgq ...

cssangularangular-materialmaterial-ui

Protected node.js REST API

I want to ensure the security of a restful API and aim to keep it simple and stateless. What is the best way to store, generate, and authenticate API keys? I was considering using node-uuid to generate keys, storing them in Redis, and then authenticating ...

javascriptnode.jssecurityrestexpress

What is the reason behind the $post not functioning while $ajax works successfully on the asp.net web api controller?

I'm curious about why the $.ajax() request is successful, but the $.post() method only returns an empty array on the controller. Here's the controller code snippet: [Route("api/actuary/{actuaryId:long}/documents/")] [HttpPost] public async Task ...

jqueryajaxasp.net-mvcasp.net-web-api

What is the best way to integrate my company's global styles CDN for development purposes into a Vue cli project using Webpack?

After attempting to import through the entry file (main.js)... import Vue from 'vue' import App from '@/App' import router from '@/router/router' import store from '@/store/store' import BootstrapVue from 'boot ...

csstwitter-bootstrapwebpackvue.jscdn

Run a PHP statement when a JavaScript condition evaluates to true

I am attempting to run a php statement if my javascript condition is true. Here is the code snippet that I have written: <input id="checkbox1" type="checkbox"> MSI<br></input> <script> $(document).ready(function(){ $(&apos ...

javascriptphpif-statementconditional-statementsexecute

The PHP-MySQL connection is successful, but the link is being rearranged within the table

I am currently working on implementing an Ajax call to update a portion of a webpage when a user clicks on a link within a table. The data is successfully retrieved, but the issue arises when the user has scrolled down to access the link - each time the da ...

phpjquerymysqlajax

Error in Next.js: Trying to destructure an undefined object in useContext

While attempting to change the state of my cursor in a Next.js app using useContext, I encountered the following error: TypeError: Cannot destructure 'Object(...)(...)' as it is undefined. The goal is to update the state to isActive: true when h ...

javascriptreactjsreact-hooksnext.jsreact-context

In certain situations, the JavaScript code runs either before or after the print dialog is displayed when using the window

I am facing an issue with the print function on my web page. I want to display a thank you message to the user after they have either printed or cancelled the print dialog. Below is a simplified version of the print function code: function printThenThank ...

javascriptprinting

What is the best way to extract and analyze CSS code from an HTML page using Java programming language

I'm looking to extract and parse the content of HTML pages using the Jsoup API, which can be found at . However, I've encountered a challenge in extracting CSS that is located in a different folder. How can this be achieved? Currently, my code ...

javahtmlcssjsoup

Create a new storefront JavaScript plugin for Shopware 6 to replace the existing one

I am attempting to replace an existing JavaScript plugin in Shopware 6. However, the code within the plugin file does not seem to execute. Here is my main.js: import MyCookiePermissionPlugin from './plugin/my-cookie-permission/my-cookie-permission.pl ...

javascriptshopware6