Menu
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> 
768
Twitter Bootstrap is a front end framework to develop web apps and sites fast. In modern web development, there are several components which are required in almost all web projects. Bootstrap provides you with all those basic modules - Grid, Typography, Tables, Forms, Buttons, and Responsiveness.
Twitter Bootstrap was originally named as Twitter Blueprint before it was released as an open-source project on GitHub on August 19th, 2011. Bootstrap was created as an internal tool with the aim of eliminating inconsistencies among developers using different tools.
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:
<head> section data-toggle="tab" to links and id for <ul> tab element$(".tabs").tabs(); to $("#tabs").tab(); 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> The key elements include:
class="nav nav-tabs" and data-tabs="tabs" of ul data-toggle="tab" and href="#orange" of the a class="tab-content" of the div of the contentclass="tab-pane" and id of the div of the itemsThe 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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
