Twitter Bootstrap tabs not working: when I click on them nothing happens

HtmlTwitter Bootstrap

Html Problem Overview

I am trying to implement Twitter Bootstrap tabs in the following code, but it does not seem to work. The tabs get displayed, but when I click on them nothing happens. Below is the only code I am using. All the other CSS/JS scripts are copied from Twitter Bootstrap framework.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="assets/twitterbootstrap/css/bootstrap.css" rel="stylesheet">
<link href="assets/twitterbootstrap/css/bootstrap-responsive.css" rel="stylesheet">

</head>

<body data-spy="scroll" data-target=".subnav" data-offset="50">

<div class="container">

<!-------->
<div id="content">
    <ul class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red">Red</a></li>
        <li><a href="#orange">Orange</a></li>
        <li><a href="#yellow">Yellow</a></li>
        <li><a href="#green">Green</a></li>
        <li><a href="#blue">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $(".tabs").tabs();
    });
</script>    
</div> <!-- container -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap.js"></script>
</body>
</html>

Html Solutions

Solution 1 - Html

You need to add tabs plugin to your code

<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>

Well, it didn't work. I made some tests and it started working when:

  1. moved (updated to 1.7) jQuery script to <head> section
  2. added data-toggle="tab" to links and id for <ul> tab element
  3. changed $(".tabs").tabs(); to $("#tabs").tab();
  4. and some other things that shouldn't matter

Here's a code

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>
     

<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>

</body>
</html>

Solution 2 - Html

The key elements include:

  1. the class="nav nav-tabs" and data-tabs="tabs" of ul
  2. the data-toggle="tab" and href="#orange" of the a
  3. the class="tab-content" of the div of the content
  4. the class="tab-pane" and id of the div of the items

The complete code is as below:

<ul class="nav nav-tabs" data-tabs="tabs">
	<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
	<li><a data-toggle="tab" href="#orange">Orange</a></li>
	<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
	<li><a data-toggle="tab" href="#green">Green</a></li>
	<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="red">
		<h1>Red</h1>
		<p>red red red red red red</p>
	</div>
	<div class="tab-pane" id="orange">
		<h1>Orange</h1>
		<p>orange orange orange orange orange</p>
	</div>
	<div class="tab-pane" id="yellow">
		<h1>Yellow</h1>
		<p>yellow yellow yellow yellow yellow</p>
	</div>
	<div class="tab-pane" id="green">
		<h1>Green</h1>
		<p>green green green green green</p>
	</div>
	<div class="tab-pane" id="blue">
		<h1>Blue</h1>
		<p>blue blue blue blue blue</p>
	</div>
</div>

Solution 3 - Html

Had a problem with Bootstrap tabs recently following their online guidelines, but there's currently an error in their markup example data-tabs="tabs" is missing on <ul> element. Without it using data-toggle on links doesn't work.

Solution 4 - Html

I have the same problem, but above some answers might be tricky for me.

I found the other answer maybe solve your question https://stackoverflow.com/questions/8816505/twitter-bootstrap-js-tabs-popups-dropdown-not-working-in-drupal/8832993#8832993

> place jquery.js before bootstrap.tab.js

Solution 5 - Html

You're missing the data-toggle="tab" data-tag on your menu urls so your scripts can't tell where your tab switches are:

HTML

<ul class="nav nav-tabs" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#red">Red</a></li>
    <li><a data-toggle="tab" href="#orange">Orange</a></li>
    <li><a data-toggle="tab" href="#yellow">Yellow</a></li>
    <li><a data-toggle="tab" href="#green">Green</a></li>
    <li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>

Solution 6 - Html

I just fixed this issue by adding data-toggle="tab" element in anchor tag

<div class="container">

<!-------->
  <div id="content">

   <ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#red">Red</a></li>
<li><a data-toggle="tab"  href="#orange">Orange</a></li>
<li><a data-toggle="tab" href="#yellow">Yellow</a></li>
<li><a data-toggle="tab" href="#green">Green</a></li>
<li><a data-toggle="tab" href="#blue">Blue</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="red">
    <h1>Red</h1>
    <p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
    <h1>Orange</h1>
    <p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
    <h1>Yellow</h1>
    <p>yellow yellow yellow yellow yellow</p>
</div>
<div class="tab-pane" id="green">
    <h1>Green</h1>
    <p>green green green green green</p>
</div>
<div class="tab-pane" id="blue">
    <h1>Blue</h1>
    <p>blue blue blue blue blue</p>

and added the following in head section

Solution 7 - Html

I tried the codes from bootstrap's document as follows:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tab demo</title>
  <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
<div class="span9">
	<div class="tabbable"> <!-- Only required for left/right tabs -->
	  <ul class="nav nav-tabs">
		<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
		<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
	  </ul>
	  <div class="tab-content">
		<div class="tab-pane active" id="tab1">
		  <p>I'm in Section 1.</p>
		</div>
		<div class="tab-pane" id="tab2">
		  <p>Howdy, I'm in Section 2.</p>
		</div>
	  </div>
	</div>
</div> 
<script src="jquery.min.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>

and it works. But when I switch these two <script src...>'s postion, it do not work. So please remember to load your jquery script before bootstrap.js.

Solution 8 - Html

For me, the problem was that I wasn't including bootstrap.min.css (I was only including bootstrap-responsive.min.css).

Solution 9 - Html

Actually, there is another easy way to do it. It works for me but I'm not sure for you guys. The key thing here, is just adding the FADE in each (tab-pane) and it will works. Besides, you don't even need to script function or whatever version of jQuery. Here is my code...hope it will works for you all.

<div class="tab-pane fade" id="Customer">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Contact Person</th>
            <td><?php echo $event['Event']['e_contact_person']; ?></td>
        </tr>
    </table>
</div>
<div class="tab-pane fade" id="Delivery">
    <table class="table table-hover table-bordered">
        <tr>
            <th width="40%">Time Arrive Warehouse Start</th>
            <td><?php echo $event['Event']['e_time_arrive_WH_start']; ?></td>
        </tr>
    </table>
</div>

Solution 10 - Html

This solved it when none of the other examples did:

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});

Solution 11 - Html

i had the same problem until i downloaded bootstrap-tab.js and included it in my script, download from here https://code.google.com/p/fusionleaf/source/browse/webroot/fusionleaf/com/www/inc/bootstrap/js/bootstrap-tab.js?r=82aacd63ee1f7f9a15ead3574fe2c3f45b5c1027

include the bootsrap-tab.js in the just below the jquery

<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>

Final Code Looked like this:

 <!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="libraries/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap-tab.js"></script>
</head>

<body>

<div class="container">

<!-------->
<div id="content">
    <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
        <li class="active"><a href="#red" data-toggle="tab">Red</a></li>
        <li><a href="#orange" data-toggle="tab">Orange</a></li>
        <li><a href="#yellow" data-toggle="tab">Yellow</a></li>
        <li><a href="#green" data-toggle="tab">Green</a></li>
        <li><a href="#blue" data-toggle="tab">Blue</a></li>
    </ul>
    <div id="my-tab-content" class="tab-content">
        <div class="tab-pane active" id="red">
            <h1>Red</h1>
            <p>red red red red red red</p>
        </div>
        <div class="tab-pane" id="orange">
            <h1>Orange</h1>
            <p>orange orange orange orange orange</p>
        </div>
        <div class="tab-pane" id="yellow">
            <h1>Yellow</h1>
            <p>yellow yellow yellow yellow yellow</p>
        </div>
        <div class="tab-pane" id="green">
            <h1>Green</h1>
            <p>green green green green green</p>
        </div>
        <div class="tab-pane" id="blue">
            <h1>Blue</h1>
            <p>blue blue blue blue blue</p>
        </div>
    </div>
</div>


<script type="text/javascript">
    jQuery(document).ready(function ($) {
        $('#tabs').tab();
    });
</script>    
</div> <!-- container -->


<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

</body>
</html>

Solution 12 - Html

Since i'm working with Bootstrap Javascript Modules instead of loading the entire Bootstrap Javascript, my tabs were not working because i forgot to load load/include/ the node_modules/bootstrap/js/tab.js file.

enter image description here

After including it, it worked...

Good Luck

Solution 13 - Html

Just copy the script tag for adding the bootstrap.js from the head section to the end of the body. Then everything should work fine even without the scripts to activate the tabs.

Categories
Recommended Html Solutions
Recommended Twitter Bootstrap Solutions

Previous Solution:

How do i pass GET parameters using django urlresolvers reverse

DjangoGetReverse

Next Solution:

How do Unix Domain Sockets differentiate between multiple clients?

LinuxSocketsIpcUnix Socket

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDEREK NView Question on Stackoverflow
Solution 1 - HtmlBartekRView Answer on Stackoverflow
Solution 2 - HtmlJackyView Answer on Stackoverflow
Solution 3 - HtmlIdaSView Answer on Stackoverflow
Solution 4 - HtmlkewangView Answer on Stackoverflow
Solution 5 - HtmlAndres IlichView Answer on Stackoverflow
Solution 6 - Htmluser1203530View Answer on Stackoverflow
Solution 7 - Htmluser2595775View Answer on Stackoverflow
Solution 8 - HtmlJon OnstottView Answer on Stackoverflow
Solution 9 - HtmlJoe GeekView Answer on Stackoverflow
Solution 10 - HtmlBrock HensleyView Answer on Stackoverflow
Solution 11 - Htmluser4237179View Answer on Stackoverflow
Solution 12 - HtmlAakashView Answer on Stackoverflow
Solution 13 - HtmlMohamed HaseelView Answer on Stackoverflow