Bootstrap選項卡導航無法正常工作

Question

我的代碼如下不起作用。 我已嘗試包含js文件，還有自定義js來單獨激活每個選項卡，但它不起作用。

<!doctype html>
<html lang="en-US"> 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
<title>Bootstrap Page Layout - Sample Demo</title>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="tabbable"> <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">
        <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
        <p>Howdy, I'm in Section 2.</p>
        </div>
    </div>
</div>

</body>

任何人都可以指出我做錯了什么？

Answer 1

檢查指向bootstrap.js文件的鏈接。 看來你正在使用縮小的CSS ......你可能也想要縮小的js文件。

<script type="text/javascript" src="js/bootstrap.min.js"></script>

根據您的瀏覽器，檢查Web開發人員工具中的任何錯誤。 在Chrome中，此鏈接有助於： https ： //developers.google.com/chrome-developer-tools/

編輯

您的文件中似乎缺少jQuery。 在頭部包含此鏈接（雖然我建議在頁腳中加載JS以進行漸進增強/改進加載）：

<script src="//code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>

Answer 2

Bootstrap您需要在腳本中下載並添加jquery。 像這樣的東西

<script type="text/javascript" src="/script/jquery-1.7.2.min.js" />

看到這里供你參考我添加了jquery v 1.7.2

Bootstrap選項卡導航無法正常工作

問題描述

2 個解決方案

解決方案1
1 已采納 2013-12-08 07:27:21

解決方案2
1 2013-12-08 07:47:20

Bootstrap選項卡導航無法正常工作

問題描述

2 個解決方案

解決方案1 1 已采納 2013-12-08 07:27:21

解決方案2 1 2013-12-08 07:47:20

解決方案1
1 已采納 2013-12-08 07:27:21

解決方案2
1 2013-12-08 07:47:20