我正在编写一个使用 phonegap 和 bootstrap 的移动应用程序，使用主导航栏在我的视图或选项卡之间切换，但是可切换列表（此处的示例）似乎不起作用。有谁知道如何解决这一问题？
<!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>