-1
부트 스트랩 웹 사이트는 탭 작동 방법을 설명하는 훌륭한 작업을 수행하지 않습니다. 스택에 비슷한 질문 몇 가지를 보았지만 내 문제를 해결할 수있었습니다. 내 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>
도움을 주시면 대단히 감사하겠습니다.
아니라 머리 부분보다, 페이지의 bootom에 모든 JS 파일을 선언하십시오에 대한
는 Jsfiddle을 만들었습니다. 모든 사용자 정의 javascript 또는 jquery 코드는 그 후에 작성해야합니다. 잘못된 코드 작성 연습 인 html 줄 사이에 이들을 작성했습니다. – Shail또한 기본 부트 스트랩 javascript 파일을 사용하는 경우 html에서 tab.js를 다시 선언 할 필요가 없으며 불필요합니다. 제거되지 않는 한 주 파일에는 필요한 모든 자바 스크립트가 포함되어 있습니다. – Shail