下面的代码是抛出错误但它之前工作正常。
<script type="text/javascript">
$(document).ready(function () {
$("ul#tab li:first").addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:first").show();
$("ul#tab li").click(function (e) {
var index = $(this).index();
$("ul#tab li").removeClass("aktif");
$(this).addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:eq(" + index + ")").show();
return false
});
$(".tabv2").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv2-"]').hide();
$('.' + thisId).show();
$('.tabv2').removeClass('tabv2-active');
$(this).addClass('tabv2-active');
});
$(".tabv2plain").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv2plain-"]').hide();
$('.' + thisId).show();
$('.tabv2plain').removeClass('tabv2plain-active');
$(this).addClass('tabv2plain-active');
});
$(".tabv3plain").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv3plain-"]').hide();
$('.' + thisId).show();
$('.tabv3plain').removeClass('tabv3plain-active');
$(this).addClass('tabv3plain-active');
});
});
</script>
<div>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<div class="row" style="padding-top:5px">
<div class="col-md-12">
<ul id="tab">
<li class="">
<a href="#">QESH MANUAL</a>
</li>
<li style="margin-left:3px;" class="aktif">
<a href="#">RELATED SOPs</a>
</li>
</ul>
</div>
</div>
<div class="row" style="padding-top:5px">
<div class="tab_icerik" style="display: block;">
<div class="col-md-4">
<span style="display:block;">
<div id="accordionA1" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" href="#collapseOne">SUNWAY CONSTRUCTION </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- SECOND LEVEL ACCORDION START -->
<div id="accordionA2" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" href="#collapseOneOne">QESH MANUAL</a>
</h4>
</div>
<div id="collapseOneOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group row clear" id="tabsv2plain">
<div class="tabv2plain tabv2plain-active" id="tabv2plain-1">QESH Manual</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" href="#collapseOneTwo">PROCEDURES MANUALS</a>
</h4>
</div>
<div id="collapseOneTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div1">
<div class="tabv2plain" id="tabv2plain-2">Tender & Contract Procedure Manual</div>
<div class="tabv2plain" id="tabv2plain-3">Procurement Procedure Manual</div>
<div class="tabv2plain" id="tabv2plain-4">Pre-Construction & Planning Procedure Manual</div>
<div class="tabv2plain" id="tabv2plain-5">Project Implementation & Management Procedure Manual</div>
<div class="tabv2plain" id="tabv2plain-6">Post-Construction Procedure Manual</div>
<div class="tabv2plain" id="tabv2plain-7">Management System Administration Procedure Manual</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" href="#collapseOneThree">QESH POLICY</a>
</h4>
</div>
<div id="collapseOneThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div2">
<div class="tabv2plain" id="tabv2plain-8">QESH Policy</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" href="#collapseOneFour">QESH OBJECTIVE</a>
</h4>
</div>
<div id="collapseOneFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div3">
<div class="tabv2plain" id="tabv2plain-9">QESH Objective</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECOND LEVEL ACCORDION END -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" href="#collapseTwo">SUNWAY ENGINEERING </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div4">
<div class="tabv2plain" id="tabv2plain-10">QESH Manual</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" href="#collapseThree">SUNWAY GEOTECHNICS </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div5">
<div class="tabv2plain" id="tabv2plain-11">QESH Manual</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" href="#collapseFour">SUNWAY CONCRETE PRODUCTS </a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div6">
<div class="tabv2plain" id="tabv2plain-12">QESH Manual</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
<div class="col-md-8">
<span style="display:block; padding:10px;">
<div class="tabplaincontent">
<div class="tabv2plain-1" style="display:block;">
One Content
</div>
<div class="tabv2plain-2" style="display:none;">
Two Content
</div>
<div class="tabv2plain-3" style="display:none;">
Three Content
</div>
<div class="tabv2plain-4" style="display:none;">
Four Content
</div>
<div class="tabv2plain-5" style="display:none;">
Five Content
</div>
<div class="tabv2plain-6" style="display:none;">
Six Content
</div>
<div class="tabv2plain-7" style="display:none;">
Seven Content
</div>
<div class="tabv2plain-8" style="display:none;">
Eight Content
</div>
<div class="tabv2plain-9" style="display:none;">
Nine Content
</div>
<div class="tabv2plain-10" style="display:none;">
Ten Content
</div>
<div class="tabv2plain-11" style="display:none;">
Eleven Content
</div>
<div class="tabv2plain-12" style="display:none;">
Twelve Content
</div>
</div>
</span>
</div>
</div>
<div class="tab_icerik" style="display: none;">
<div class="col-md-4">
<span style="display:block;">
<div id="accordionB1" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionB1" href="#collapseFive">FINANCE & ADMIN</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group row clear" id="tabsv3plain">
<div class="tabv3plain" id="tabv3plain-1">General</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionB1" href="#collapseSix">HUMAN RESOURCES</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div7">
<div class="tabv3plain" id="tabv3plain-2">General</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionB1" href="#collapseSeven">LEGAL</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div8">
<div class="tabv3plain" id="tabv3plain-3">General</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionB1" href="#collapseEight">SCCM</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div9">
<div class="tabv3plain" id="tabv3plain-4">General</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
<div class="col-md-8">
<span style="display:block; padding:10px;">
<div class="tabplaincontent">
<div class="tabv3plain-1" style="display:block;">
Thirteen Content
</div>
<div class="tabv3plain-2" style="display:none;">
Fourteen Content
</div>
<div class="tabv3plain-3" style="display:none;">
Fifteen Content
</div>
<div class="tabv3plain-4" style="display:none;">
Sixteen Content
</div>
</div>
</span>
</div>
</div>
</div>
</div>
我甚至试图改变Jquery引用的顺序（通过引用与同一问题相关的其他文章），但问题仍然是相同的。
请帮帮我，我不知道我的代码突然出了什么问题。
这里工作正常：http://codepen.io/anon/pen/JYrOQa， 当我将此代码添加到Visual Studio（本地）时，它在那里工作正常，但突然我最终得到以下错误：
未捕获的ReferenceError：$未定义
答案 0 :(得分：2)
在使用任何jQuery函数之前，必须调用jQuery库。
为安全起见，您可以从头部开始调用jQuery库，
<head>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
</head>
HOWEVER ，为了获得更好的性能，应在加载所有HTML元素之后（在</body>标记之前）编写所有脚本。因此，您可以在调用jQuery库后编写jQuery脚本，
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
...
});
</script>