twitter-bootstrap Bootstrap 3 可切换标签不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19474671/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-21 18:54:43 来源:igfitidea点击:
Bootstrap 3 Togglable Tabs not working
提问by user1952312
I'm writing a mobile app using phonegap and bootstrap using the main navbar to switch between my view or tab however the togglable list (example here) doesn't seem to work. Does anyone know how to fix this?
我正在使用 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>
回答by nik
There were typo mistakes in your html with ID assignment in tab-content. You have specified
在标签内容中分配了 ID 的 html 中存在拼写错误。您已指定
<div class='tab-pane fade' id='resoucre'> and <div class='tab-pane fade' id='favorite'>
But it should be like
但它应该像
<div class='tab-pane fade' id='resource'> and <div class='tab-pane fade' id='favorites'>
Following is corrected html..
以下是更正的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>
回答by yussan
Simple way, you can do this, wothouth adding more javascript line, just only load bootstrap.css ver 3
简单的方法，你可以做到这一点，无需添加更多的 javascript 行，只需加载 bootstrap.css ver 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>
回答by Yocto Karthi
<!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>
