Jquery 引导3个可切换选项卡不工作
我正在使用phonegap和引导功能编写一个移动应用程序,使用主导航栏在视图或选项卡之间切换,但是切换列表(示例)似乎不起作用。有人知道如何解决这个问题吗Jquery 引导3个可切换选项卡不工作,jquery,twitter-bootstrap,cordova,Jquery,Twitter Bootstrap,Cordova,我正在使用phonegap和引导功能编写一个移动应用程序,使用主导航栏在视图或选项卡之间切换,但是切换列表(示例)似乎不起作用。有人知道如何解决这个问题吗 <!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-
<!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>
癌症资源应用
- …搜索
- 资源
- 列表
- …收藏夹
$(“#选项卡a”)。单击(功能(e){
e、 预防默认值();
$(this.tab('show');})
您的html中有拼写错误,选项卡内容中有ID分配。您已经指定了
<div class='tab-pane fade' id='resoucre'> and <div class='tab-pane fade' id='favorite'>
和
但应该是这样的
<div class='tab-pane fade' id='resource'> and <div class='tab-pane fade' id='favorites'>
和
以下是更正的html
<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='resource'>
<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='favorites'>
<ul>
<li>...favorites</li>
</ul>
</div>
</div>
-
-
-
-
- …搜索
- …资源
- …列表
- …最爱
简单的方法,您可以做到这一点,通过添加更多的javascript行,只需加载bootstrap.css版本3即可
<div class="tabbable" > <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#baru" data-toggle="tab">Baru</a></li>
<li ><a href="#posted" data-toggle="tab">Posted</a></li>
<li><a href="#draft" data-toggle="tab">Draft</a></li>
</ul>
<br/>
<div class="tab-content">
<!--new-->
<div class="tab-pane active" id="baru">
baru
</div>
<!--new-->
<div class="tab-pane" id="posted">
posted
</div>
<!--new-->
<div class="tab-pane" id="draft">
draft
</div>
</div>
</div>
巴鲁
张贴
草案
引导盒
动态选项卡
家
知识产权是一种权利,是一种精英的权利,是劳动和财富的暂时性权利
菜单1
但是,在最低限度上,我们需要一个实验室来进行日常工作
菜单2
在所有人都有错误的情况下,我们必须清楚地看到,所有的人都有错误
菜单3
发明者的真实性和准建筑师必须解释清楚
我已将此修复程序逐字复制并粘贴到我的项目中,但当您单击每个选项卡窗格时,它仍然不会切换选项卡内容我不相信我的js正在工作我发现我有[this]()但在我切换到[this]()以上答案有效请解释您的更改以及您为解决问题所做的操作。否则您的答案可能会被否决,甚至被删除。初始化javascript和Css的顺序为1。jquery.js2。boostrap.min.css 3。boostrap.min.js检查您的订单。。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="js/jquery.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au
+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>