我希望我的网站有一个带有选项卡的菜单，如图所示 在 Twitter Bootstrap 网站上。
我已经在 js/ 文件夹中下载了 jquery 1.11.2 并放置了以下内容
在头部:
<link rel="stylesheet" href="css/bootstrap.css">
<!--- Google fonts-->
<!-- javascript libraries -->
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--- personal styles should always be below bootstrap -->
<link rel="stylesheet" href="css/theme.css">
为了获取 Navs 菜单，我从 Bootstrap 组件页面复制并粘贴了代码(我只是更改了要显示的文本)
<div class="row">
<div class="col-md-12 site-menu">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="index.html">Home</a></li>
<li role="presentation"><a href="#">Projects</a></li>
<li role="presentation"><a href="#">About</a></li>
</ul>
</div>
然而，导航并不像我预期的那样，链接显示为元素符号列表。
我做错了什么？我怎样才能显示 Navs Tabs 和 Navs pills？
最佳答案
我猜你没有正确链接 CSS 文件，尝试使用 最新 版本的 CDN 链接，
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})<!--- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<!--- personal styles should always be below Bootstrap Core CSS -->
<!--<link rel="stylesheet" href="css/theme.css">-->
<!--- Google fonts-->
<div class="row">
<div class="col-md-12 site-menu">
<ul id="myTab" class="nav nav-tabs">
<li role="presentation" class="active"><a href="index.html">Home</a>
</li>
<li role="presentation"><a href="#">Projects</a>
</li>
<li role="presentation"><a href="#">About</a>
</li>
</ul>
</div>
<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- Bootstrap Core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>html 文件的大纲应如下所示:
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap Core CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Google Fonts -->
<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:400,700|Amatic+SC:400,700" rel="stylesheet">
<!-- My Theme style -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--lots of html-->
<!--lots of html-->
<!--lots of html-->
<!-- jQuery 2.0.2 -->
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<!-- Bootstrap Core JS -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script>
<!-- some JS Function -->
</script>
</body>
</html>
关于javascript - Bootstrap3 导航显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29878561/