Bootstrap 3 Togglable Onglets ne fonctionne pas
Je suis en train d'écrire une application mobile à l'aide de phonegap et bootstrap à l'aide de la barre de navigation principale pour basculer entre mon point de vue ou de l'onglet cependant la togglable liste (exemple ici) ne semble pas fonctionner. Personne ne sait comment résoudre ce problème?
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Cancer Resource Application</title>
<meta name="description" content="http://www.cancerresource-al.org">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-bottom navbar-cenerted" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Cancer Resource Application</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-tabs " id='tabs'>
<li><a class="text-muted" href="#search" data-toggle="tab"><span class="glyphicon glyphicon-search"></span>Search</a></li>
<li><a class="text-muted" href="#resource" data-toggle="tab"><span class="glyphicon glyphicon-th"></span>
Resources</a></li>
<li><a class="text-muted" href="#list"><span class="glyphicon glyphicon-list" data-toggle="tab"></span>List</a></li>
<li><a class="text-muted" href="#favorites" data-toggle="tab"><span class="glyphicon glyphicon-star"></span>Favorites</a></li>
</ul>
</div>
</div>
<div class='tab-content'>
<div class='tab-pane fade in active' id='search'>
<ul><li>...search</li></ul>
</div>
<div class='tab-pane fade' id='resoucre'>
<ul><li>...resource</li></ul>
</div>
<div class='tab-pane fade' id='list'>
<ul><li>...list</li></ul>
</div>
<div class='tab-pane fade' id='favorite'>
<ul><li>...favorites</li></ul>
</div>
</div>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
$('#tabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');})
</script>
</body>
</html>Vous devez vous connecter pour publier un commentaire.
Il y avait faute de frappe des erreurs dans ton code html avec ID d'affectation dans l'onglet de contenu. Vous avez spécifié
Mais il doit être comme
Démo De Violon
Suivant est corrigé html..
Manière Simple, vous pouvez le faire, wothouth en ajoutant plus de javascript ligne, juste que la charge de bootstrap.css ver 3