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

The frisbyjs test is not passing due to the absence of proper HTTP headers being sent by the get()

My frisbyjs test is failing because the x-access-token and x-key HTTP headers are not being sent. Am I missing something? This seems like a simple mistake. Here is the outer test that contains the failing test within afterJSON(): frisby.create('Logi ...

javascriptnode.jsjasmine-node

Troubleshooting Issue: Failure of Ajax Script to Display Saved Data in Edit Function

Whenever I clicked on the Edit icon in the action column of my data tables, the saved data did not display as expected. I noticed that this issue was only occurring for file input types, while it worked properly for text input types. In the Blade file Ad ...

javascriptajaxlaravel-8

The function res.send is unavailable and errors are not being properly managed

I encountered a peculiar error while using my function to create users in my mongoose database. Despite the user being successfully created, I am facing an issue where res.send is not functioning as expected, resulting in no response and instead, an error. ...

javascriptnode.jsrestexpressmongoose

I'm looking for a way to dynamically update Laravel pagination records based on the selected option value for the number of items per page using Laravel and

I am working on creating a custom filter system using a select option menu and pagination with AJAX. The select option allows users to choose between displaying 10, 15, 20, or 25 products per page while updating the Laravel default pagination dynamically ...

phpjqueryajaxlaravelpagination

Unauthenticated user attempting to send a post request via React JS without proper authentication

Currently, I am working on a project where I am following a video tutorial that demonstrates how to authenticate a user using node and passport JS. The tutorial itself uses Hogan JS as its view engine, but I have decided to implement React as my front end ...

javascriptnode.jsmongodbreactjspassport.js

Leveraging React hooks to combine an array and an object within an array

Struggling to incorporate an array and an object into another array. This is the setup in my constructor: const [dashboard, setDashboard] = useState({ loading: true, data: [], address: '' }) This is how I envision the final data structure: { ...

javascriptreactjs

Element in the Middle

I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...

htmlcss

A guide on extracting the current website URL in a React application

I wanted to find a method to duplicate the text from a URL so that users could easily share the link with others. ...

javascriptreactjsnext.js

transformation of images

Currently, I am using dynamic code to retrieve my gallery images: <section id="banner"> {pyro:galleries:images slug="template-slider" limit="5"} <img src="{pyro:url:base}uploads/default/files/{name}" alt="{name}"> ...

jqueryimage

Looking to incorporate new values without replacing them in react.js and mongoDB

function getFilterQuery() { const completedWorkState = WorkflowStates.findOne({title: 'Completed'}); const inProgressWorkState = WorkflowStates.findOne({title: 'In Progress'}); const identifiedWorkState = WorkflowStates.findOne ...

javascriptreactjsmongodb

Display a separate component within a primary component upon clicking a button

Looking to display data from a placeholder module upon component click. As a beginner with React, my attempts have been unsuccessful so far. I have a component that lists some information for each element in the module as a list, and I would like to be ab ...

javascriptreactjstypescript

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

javascriptjqueryhtmlcssjquery-mobile

How can a false validation be conducted on knockout js?

Using knockout js, I have an input type checkbox and I want to trigger the "not true" action when this checkbox is selected. Here's what I have attempted: <input type="checkbox" data-bind="checked: !IsVisible"/> Unfortunately, this code isn&ap ...

javascriptjqueryknockout.jschecked

Why does React component still use old state when re-rendering?

I recently encountered an issue with my code. I am using an array of objects in my state, and when I delete an item from the array, the component does not render correctly without the deleted object. Additionally, when I try to open another object (trigger ...

javascriptreactjs

Linking two socket.io clients together (Establishing a direct socket-to-socket connection that works across different browsers)

Can a direct P2P connection be established between two browsers using socket.io-client, bypassing the node.js server they are currently connected to? If possible, how? The goal is for clients A and B to communicate directly without going through the node. ...

javascriptnode.jssocketsexpresssocket.io

Building a Basic Calculator with Jquery, Ajax, and Servlet

I need help in developing a basic calculator using jQuery, AJAX, and servlet. The calculator will have two input boxes for numbers, a dropdown list to select the operator, and another textbox to display the result. The unique feature of this calculator is ...

jqueryajaxservlets

Understanding JavaScript Regular Expressions

To ensure that no HTML tags are entered into a textarea, I am utilizing the following regex for validation. If any HTML tags are detected in the textarea, I need to display a validation message. The regex being used is: /<(\w+)((?:\s+\w ...

javascripthtml

Error: Unable to assign value 'auto' to property of null object

Whenever I attempt to update my MongoDB using AngularJS on the front end and Node.js on the backend, I encounter a `TypeError: Cannot set property 'auto' of null error. Here is the code snippet that resulted in this issue: AngularJS Code: scope ...

javascriptangularjsnode.jsmongodbexpress

Tips for modifying a user's tags with Quickblox's JavaScript SDK

Is there a way to update a user's tags using the Quickblox JavaScript SDK? I have attempted using the parameter names listed below: user_tags tags with var params = { user_tags: ["testing"] }; Kindly avoid suggesting alternatives like "custom ...

javascriptnode.jsquickblox

Is it possible to post to a text file using AJAX?

Struggling to save an AJAX request to a text file named "data.txt" using submit.php - any tips on how to achieve this successfully? function makeAjaxRequest(cData) { var promise = $.ajax({ type: "POST", url: url, data: cData, ...

phpjqueryajaxpost