CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
karmanaut
karmanaut

Reputation: 628

Bootstrap tab navigation not working

My code as follows does not work. I;ve tried including the js files, also the custom js to activate each tab individually but it does not work.

<!doctype html>
<html lang="en-US"> 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<title>Bootstrap Page Layout - Sample Demo</title>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<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>

</body>

Can anyone point what am I doing wrong?

Upvotes: 0

Views: 969

Answers (2)

Drixson Ose&#241;a
Drixson Ose&#241;a

Reputation: 3641

Bootstrap You need to download and add jquery in your script. Something like this

<script type="text/javascript" src="/script/jquery-1.7.2.min.js" />

see here for your reference i added jquery v 1.7.2

Upvotes: 1

Ahmed Sagarwala
Ahmed Sagarwala

Reputation: 410

Check your link to the bootstrap.js file. It appears you are using the minified css... you probably want the minified js file too.

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

Depending on your browser, check for any errors in your web developer tools. In Chrome, this link will help: https://developers.google.com/chrome-developer-tools/

EDIT

It appears jQuery is missing from your file. Include this link in the head (although I recommend loading JS in the footer for progressive enhancement / improved loading):

<script src="//code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>

Upvotes: 1

Related Questions