bootstrap 网站没有很好地解释如何让选项卡工作。我在堆栈上查看了一些类似的问题，但无法解决我的问题。这是我的html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>90 Minute IPA</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Leopard - Clean & Responsive HTML Template">
<!-- FAVICON & ICONS -->
<link rel="icon" type="image/png" href="img/favicon.ico" />
<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<![endif]-->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Responsive CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">
<!-- GOOGLE FONTS -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- JAVA SCRIPT -->
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.nivo.slider.js"></script>
<script src="js/jquery.tweet.js"></script>
<script src="js/jquery.quicksand.js"></script>
<script src="js/superfish.js"></script>
<script src="js/custom.js"></script></head>
<script src="myJava.js"></script>
<script src="beerPageScripts.js"></script>
<body>
<div class="boxedWrap">
<!-- HEADER -->
<header>
<div class="container">
<div class="row">
<!-- LOGO -->
<div class="span3">
<a href="index.php"><img src="logo3.png" alt="Leopard"></a>
</div>
<!-- End LOGO -->
<div class="span9">
<a class="btn btn-navbar pull-right visible-phone" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-align-justify"></span>
</a>
<!-- NAV -->
<div class="nav-collapse">
<nav id="primary-nav">
<ul>
<li><a href="index.php">Home</a> </li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="beerPortfolio.php">Beer Portfolio</a></li>
<li><a href="beerMap.php">Brewery Map</a></li>
<li><a href="tastePortfolio.php">Taste Profile</a></li>
</ul>
</li>
<li><a href="#">Statistics</a>
<ul>
<li><a href="breweryStats.php">Brewery</a></li>
<li><a href="styleStats.php">Style</a></li>
<li><a href="tasteStats.php">Taste</a> </li>
</ul>
</li>
<li><a href="#">Discover</a>
<ul>
<li><a href="tasteDiscover.php">Top Taste </a></li>
<li><a href="topBreweries.php">Top Breweries </a></li>
<li><a href="topBeers.php">Top Beers </a></li>
<li><a href="topStyles.php">Top Styles</a></li>
</ul>
</li>
<li><a href="blog.html">Friends</a></li>
<li><a href="contact.html">Settings</a></li>
</ul>
</nav>
</div>
<!-- End NAV -->
</div>
</div>
</div>
</header>
<!-- CONTAINER WRAPPER -->
<div id="content" class="container">
<div class="row">
<!-- RIGHT CONTENT -->
<script type="text/javascript" src="assets/twitterbootstrap/js/bootstrap-tab.js"></script>
<script type="text/javascript" src="js/jquery.raty.min.js"></script>
<script>
$('#tabbable a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
</script>
<style type="text/css">
.form{
$('.form').show(); display: none;
}
</style>
<div class="span9">
<div class="row">
<div class="span9 space">
<h3 class="title">90 Minute IPA</h3>
</div>
<div class="clearfix"></div>
<div class="span4 space">
<img src = "https://s3.amazonaws.com/brewerydbapi/beer/qqTzHb/upload_mGIvsJ-medium.png">
</div>
<div class="span5 space">
<p> <strong>Brewery: </strong> Dogfish Head Craft Brewery</p>
<br>
<p> <strong>Style: </strong> Imperial or Double India Pale Ale</p>
<br>
<p> <strong>ABV: </strong> 9 %</p>
<br>
<p> <strong>IBU: </strong> 90</p>
<br>
<p> <strong>Glass: </strong> Snifter</p>
<br>
<p> <strong>Average Rateing: </strong> 4</p>
<script type="text/javascript">
$(function() {
$('#cancel-custom').raty({
cancel: false,
cancelHint: 'remove my rating!',
cancelPlace: 'left',
hintList: ['Bad', 'Poor', 'Regular', 'Good', 'Awesome!'],
start: 4 ,
click: function(score, evt) {
updateRate(score,3,'qqTzHb')
}
});
});
</script>
<br>
<p><strong> Your Rating: </strong>
<div id="cancel-custom" > </div> </p>
</div> <!-- end information box -->
<div class="span9 space">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</span>
</div>
<div class="span9 space">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Description</a></li>
<li class="active"><a href="#tab2" data-toggle="tab">Taste Profile</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p><strong>Description: </strong> Esquire Magazine calls our 90 Minute IPA., "perhaps the best I.P.A. in America." An Imperial I.P.A. brewed to be savored from a snifter. A big beer with a great malt backbone that stands up to the extreme hopping rate.
90 Minute IPA was our first continually-hopped beer, which is a method of hopping that allows for a pungent, but not crushing hop flavor. Since introducing the world to the continual-hopping method with our 90 Minute IPA, we've since released a continually-hopped 60 Minute IPA, 120 Minute IPA and even a 75 Minute IPA (a cask-conditioned blend of 60 & 90 Minute IPAs).
In addition to the continual-hopping 90 Minute IPA recieves during the boil, we also utilize our 'Me So Hoppy' device to dry-hop the beer during conditioning (check it out in the video below).
This beer is an excellent candidate for use with our Randall The Enamel Animal filter!</p>
</div>
<div class="tab-pane" id="tab2">
<p>Yummy, tastes go here</p>
</div>
</div>
</div>
</div></div> <!-- end span9-->
</div> <!-- end row -->
<!-- SIDEBAR -->
<div id="sidebar" class="span3">
<form name="input" action="search.php" method="get">
<div class="input-prepend">
<span class="add-on"><i class="icon-search"></i></span>
<input type="text" name="s" id="s" placeholder="Beer Search" />
</div>
</form>
<div class="textWidget">
<h6>Stats</h6>
<p><strong>Beer Count: </strong> 182 </p>
<p class="center"> </p>
<p><strong>Brewery Count: </strong> 83 </p>
<p class="center"> </p>
<p><strong>Style Count: </strong> 50 </p>
<p class="center"> </p>
<p><strong>High ABV: </strong> 18 </p>
<p class="center"> </p>
<p><strong>High IBU: </strong> 120 </p>
<p class="center"> </p>
</div>
</div>
<!-- End SIDEBAR -->
</div>
</div>
<!-- End CONTAINER -->
<!-- FOOTER -->
<footer>
<!-- FOOTER WIDGETS -->
<!-- End FOOTER WIDGETS -->
<div id="footerBottom">
<div class="container">
<div class="row">
<div class="span4">
© Copyright 2012 by <a href="index.html">Beer Portfolio</a> All Right Reserved.
</div>
<div class="span8 hidden-phone">
<!-- SECONDARY NAV -->
<nav id="secondary-nav">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="logOut.php">Log-Out</a></li>
</ul>
</nav>
<!-- End SECONDARY NAV -->
</div>
</div>
</div>
</div>
</footer>
<!-- End FOOTER -->
</div>
</body>
</html>
任何帮助将不胜感激，非常感谢。