Bootstrap tabs not switching

问题

<html>
<head>
<script src="js/jquery.1.6.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="stylesheets/bootstrap-responsive.css"> 

<script src="css/bootstrap.min.js"></script>
<script src="css/bootstrap.js"></script>
</head>
<body>
 <ul class="nav nav-tabs id="tabs">
<li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
<li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>

<div class="tab-content">
<div id="tab1" class="tab-pane">
This is the text of tab1.
</div>

<div id="tab2" class="tab-pane">
<p>This is the text of tab2.</p>
</div>

<div id="tab3" class="tab-pane">
<p>This is the text of tab3.</p>
</div>
</div>
</html>

I've tried everything and basically it just won't switch tabs. I've even tried copying source code from other sites and it still won't work.

回答1:

I think the problem is with the jQuery verison 1.6, bootstrap used .on() which was added only in jQuery verision 1.7. So upgrade jQuery to a newer version and it should be fine

With jQuery 1.6.4: Demo - not working because of error

Uncaught TypeError: Object [object Object] has no method 'on'

Demo: jQuery 1.7, jQuery 1.9

回答2:

   <ul class="nav nav-tabs id="tabs">

you are missing a closing " on your class it should be

   <ul class="nav nav-tabs" id="tabs">

see if that fixes it

来源：https://stackoverflow.com/questions/19330173/bootstrap-tabs-not-switching

标签

html

twitter-bootstrap

tabs