Question

我设计了一个标记，我正在尝试使用jquery在bootsrap上创建一个标签。我写了如下标记代码。请检查标签不工作的原因？我的代码有什么问题。在它显示的JavaScript控制台中 ReferenceError：$未定义

    <!doctype html>
<html>
<head>

<meta charset="UTF-8">
<title>Just Live 24</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/tv-theme.css">
<link href="css/main_pricetable.css" rel="stylesheet">
</head>
<body>
<div class="col-md-6">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">bmnmn,b,mbn...</div>
  <div class="tab-pane" id="profile">.werewr..</div>
  <div class="tab-pane" id="messages">.jkhk..</div>
  <div class="tab-pane" id="settings">llkjlk...</div>
</div>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})</script>

</div>
<hr>






</body>
</html>

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Tabs</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
    <div class="col-md-6">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
        <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
        <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
        <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
    </ul>
</div>
<div class="tab-content" style="margin-left:20px;">
  <div class="tab-pane active" id="home">bmnmn,b,mbn...</div>
  <div class="tab-pane" id="profile">.werewr..</div>
  <div class="tab-pane" id="messages">.jkhk..</div>
  <div class="tab-pane" id="settings">llkjlk...</div>
</div>

</div>
<hr>
</body>
</html>

http://jsfiddle.net/7r6kgooh/

Answer 2

很可能你忘了在脚本src属性中附加http。

src="http://code.jquery.com/jquery-1.11.0.min.js"
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"

因此浏览器无法获取脚本，也无法识别jquery速记（即$）。

我的标记中有些奇怪。 Twitter引导程序选项卡不起作用

2 个答案: