1. 首页
  2. 问答
  3. 错误：Uncaught ReferenceError：$未定义

错误：Uncaught ReferenceError：$未定义

2015-10-19 120 views
-2

下面的代码抛出错误，但它之前工作正常。

<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 &amp; Contract Procedure Manual</div> 
                   <div class="tabv2plain" id="tabv2plain-3">Procurement Procedure Manual</div> 
                   <div class="tabv2plain" id="tabv2plain-4">Pre-Construction &amp; Planning Procedure Manual</div> 
                   <div class="tabv2plain" id="tabv2plain-5">Project Implementation &amp; 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 &amp; 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（本地），为时已在那里工作很好，但我突然结束了以下错误：

Uncaught ReferenceError: $ is not defined

来源

2015-10-19 user3196511

+0

在包含jQuery库之前，您无法执行jQuery代码。 – j08691

+0

如前所述，在尝试调用它之前，您需要包含jQuery库。 – Darren

+1

谢谢你的回复。我想知道当我将它添加到Visual Studio中时，第一次使用相同的代码是如何工作的？但是，谢谢你Darren和j08691，现在问题已经解决。 – user3196511

回答

1

你有在使用任何jQuery函数之前调用jQuery库。

为了安全起见，你可以从你的头区间调用jQuery库，

<head> 
    <script src="//code.jquery.com/jquery-1.11.3.js"></script> 
</head>

无论其，为了更好的表现，所有的脚本应该所有的HTML元素加载后写（只在</body>标签之前）。因此，您可以在调用jQuery库之后编写jQuery脚本，如下所示：

<script src="//code.jquery.com/jquery-1.11.3.js"></script> 
<script> 
    $(document).ready(function(){ 
     ... 
    }); 
</script>

来源

2015-10-19 02:32:00

+0

最好在页面的页脚/结尾处调用关系加载顺序，但''现在可以。 – Darren

+0

@达伦这就是为什么我写了“OR”部分 –

+0

谢谢@SaumilSoni。它的工作现在很好。 – user3196511

相关问题

 相关问题