php - bootstrap tabs not working -
php - bootstrap tabs not working -
the bootstrap website not great job of explaining how tabs work. have looked @ few similiar questions here on stack havent been able prepare problem. here html code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>90 min 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 min 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> majestic or double republic of 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 rating!', cancelplace: 'left', hintlist: ['bad', 'poor', 'regular', 'good', 'awesome!'], start: 4 , click: function(score, evt) { updaterate(score,3,'qqtzhb') } }); }); </script> <br> <p><strong> rating: </strong> <div id="cancel-custom" > </div> </p> </div> <!-- end info box --> <div class="span9 space"> <!-- place tag want +1 button render. --> <div class="g-plusone" data-size="medium"></div> <!-- place tag after lastly +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 mag calls our 90 min ipa., "perhaps best i.p.a. in america." majestic i.p.a. brewed savored snifter. big beer great malt backbone stands extreme hopping rate. 90 min ipa our first continually-hopped beer, method of hopping allows pungent, not crushing hop flavor. since introducing world continual-hopping method our 90 min ipa, we've since released continually-hopped 60 min ipa, 120 min ipa , 75 min ipa (a cask-conditioned blend of 60 & 90 min ipas). in add-on continual-hopping 90 min ipa recieves during boil, utilize our 'me hoppy' device dry-hop beer during conditioning (check out in video below). beer first-class candidate utilize our randall 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 <a href="index.html">beer portfolio</a> 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> any help appreciated, give thanks much.
the problem code , using class "tabbable" id .
$('#tabbable a').click(function (e) { e.preventdefault(); $(this).tab('show'); }) created jsfiddle jsfiddle -tabs illustration
php jquery html twitter-bootstrap tabs
Comments
Post a Comment