Twitter Bootstrap Tabs Not Working: When I Click on Them Nothing Happens

  • Home
  • Languages
  • HTML
  • Twitter Bootstrap Tabs Not Working: When I Click on Them Nothing Happens

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

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>

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

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>

Tabs not working when they are clicked

<html><head><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">           <style type="text/css">             
           </style>           </head>           <body>           <ul class="nav nav-tabs" role="tablist">                <li role="presentation" class="active">                <a href="#history" aria-controls="history"                 role="tab" data-toggle="tab">History</a></li>
                 <li role="presentation">                 <a href="#events"                 aria-controls="events" role="tab"                 data-toggle="tab">Events</a></li>
                 <li role="presentation">                 <a href="#tickets"                 aria-controls="tickets" role="tab"                 data-toggle="tab">Tickets</a></li>
                 <li role="presentation">                 <a href="#hours"                 aria-controls="hours" role="tab"                 data-toggle="tab">Hours</a></li> </ul> <div class="tab-content">            <div role="tabpanel" class="tab-pane fade in active" id="history">                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More»</a></p>               </div>            <div role="tabpanel" class="tab-pane fade" id="events">                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More»</a></p>               </div>             <div role="tabpanel" class="tab-pane fade" id="tickets">             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>     <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More»</a></p>               </div>            <div role="tabpanel" class="tab-pane fade" id="hours">                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>            <p style="text-align:left"><a class="btn btn-primary btn-xs" href="#" >More»</a></p>               </div> </div>
  </body>  </html>

Bootstrap5.0 tabs not working: when I click on them different tab information shows up

The issue is that in the markup, every div with the .tab-pane class is also with the .active class, which causes this behavior.
If you modify and just let the first with the .active class, it works as expected:

<!DOCTYPE html>
<html lang="en">
<head>
    <!--Meta-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <!--Bootstrap CSS-->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <!--Fontawesome-->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <title>Document</title>
</head>
<body>
   
<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
    <p>clicked home</p>
<p>clicked home</p>
<p>clicked home</p>
  </div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    <p>clicked profile</p>
    <p>clicked profile</p>
    <p>clicked profile</p>
  </div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
    <p>clicked contact</p>
    <p>clicked contact</p>
    <p>clicked contact</p>
  </div>
</div>

       <!--Bootstrap Js-->
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

Twitter Bootstrap tabs not working well

Right, you need to:

  • Remove the data-toggle="tab" attribute from the <ul>
  • Add the .active class to the <li> not the <a>
  • Wrap the tabs in a div with the .tab-content class

I've created a working fiddle for you: https://jsfiddle.net/a866Lgja/

You don't need the jQuery code either, that will make them jQuery tabs, not Bootstrap tabs: https://jqueryui.com/tabs/

Twitter Bootstrap Tabs not activating

You didn't add the bootstrap js :)

Twitter Bootstrap Tabs Not Working

Add to all a-tags (which should be tabs) the data-toggle attribute with the value tab, e.g.:

<li><a data-toggle="tab" href="#home">Service 1</a></li>

Also see this example; the 3rd tab is selected by setting the class active to the li.

P.S.: your javascript ($(function () { $('.tabs a:first').tab('show') })) is not neccessary.

=== UPDATE ===

For your example link in your command the document head should look like:

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Your Income Expert</title>
    <link type="text/css" rel="stylesheet/less" href="less/style.less">
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <script type="text/javascript" src="js/less.js"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
</head>

bootstrap 3 tabs not working properly

According to the Docs you need to put an id on each link in the header and that link needs to be inside the li which should have no other styles, i.e doesn't need all the data-target stuff in the li. Your list has with no data-toggle or id.

Your HTML would be like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><ul class="nav nav-tabs">   <li><a href="#a" data-toggle="tab">a</a></li>   <li><a href="#b" data-toggle="tab">b</a></li>   <li><a href="#c" data-toggle="tab">c</a></li>   <li><a href="#d" data-toggle="tab">d</a></li></ul>
<div class="tab-content">   <div class="tab-pane active" id="a">AAA</div>   <div class="tab-pane" id="b">BBB</div>   <div class="tab-pane" id="c">CCC</div>   <div class="tab-pane" id="d">DDD</div></div>

Twitter Bootstrap Tabs Not Working

Add to all a-tags (which should be tabs) the data-toggle attribute with the value tab, e.g.:

<li><a data-toggle="tab" href="#home">Service 1</a></li>

Also see this example; the 3rd tab is selected by setting the class active to the li.

P.S.: your javascript ($(function () { $('.tabs a:first').tab('show') })) is not neccessary.

=== UPDATE ===

For your example link in your command the document head should look like:

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Your Income Expert</title>
    <link type="text/css" rel="stylesheet/less" href="less/style.less">
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <script type="text/javascript" src="js/less.js"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
</head>

Bootstrap tabs not changing content

Following the official Bootstrap guide, it looks like you need to add the Javascript code manually:

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

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

You can activate individual tabs in several ways:

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

Related Topics

Share Style Across Web Components "Of The Same Type"

How to Apply CSS and Styling to a React Component

Prevent Ligatures in Safari (Mavericks/iOS7) via CSS

How to Align a Label and a Textarea

Why Height=100% Doesn't Work

HTML Span Align Center Not Working

How to Render Svg Elements with Crisp Edges While Still Keeping Anti-Aliasing

How to Manage Duplicate Code in Static HTML Websites

How to Change an HTML Output of Wcf Service with My Own Content

How to Put Table in The Center of The Page Using CSS

How to Make Rounded Border in Ie8 with CSS

How to Put Text Over an Image Without Absolute Positioning or Setting The Image as Backbround

No Video with Supported Format and Mime Type Found. What Does This Mean and How to Change This

Flip/Mirror an Image Horizontally + Vertically with CSS

HTML List Isn't Vertically Aligned When Using Floating Images

Unicode Character as Bullet for List-Item in CSS

How to Make a Transparent Border Using CSS

Bootstrap Dropdown Clipped by Overflow:Hidden Container, How to Change The Container


Leave a reply



Submit