2017-10-19 61 views
-1

我似乎无法在下拉菜单的href部分载入我的任何文件。我正在尝试在.where-you-tune类中动态加载文件。我不知道我在做什么错的,因为我不断收到将html文件从href载入div无法使用jquery .load

(index):81 Uncaught TypeError: $(...).load is not a function

我已经排除了一些引导代码,因为它是没有必要的

<!-- Navigation --> 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> 
    <div class="container-fluid"> 
    <a class="navbar-brand" href="#">Scooters Tuner</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarResponsive"> 

     <div class="dropdown"> 
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Tuning Type 
     </button> 
     <div class="dropdown-menu tuning-selection" aria-labelledby="dropdownMenuButton"> 
      <a class="dropdown-item tuning-selection" id="guitar_standard" href="tunings/guitar_standard.html">Guitar(Standard)</a> 
      <a class="dropdown-item tuning-selection" id="guitar_drop_d" href="tunings/guitar_drop_d.html">Guitar(Drop D) </a> 
      <a class="dropdown-item tuning-selection" id="bass_standard" href="tunings/bass_standard.html">Bass Standard</a> 
      <a class="dropdown-item tuning-selection" id="mandolin_standard" href="tunings/mandolin_standard.html">Mandolin</a> 

     </div> 
     </div> 

     <ul class="navbar-nav ml-auto"> 
     <li class="nav-item active"> 
      <a class="nav-link" href="#">About 
      <span class="sr-only">(current)</span> 
      </a> 
     </li> 
     </ul> 

    </div> 
    </div> 
</nav> 

<!-- Page Content --> 
<div class="container"> 
    <div class="row"> 
    <div class="col-lg-12"> 
     <div class="where-you-tune"> 


     </div> 
    </div> 
    </div> 
</div> 

<!-- Bootsrap Core JS --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
<script type="text/javascript"> 

部分我有

麻烦
$(document).ready(function(){ 
    $('a.tuning-selection').click(function(e){ 
     e.preventDefault(); 
     $('.where-you-tune').load($(this).attr('href')); 
    }); 
}); 
+5

可能重复的[如何使用jQuery更改超链接的href](https://stackoverflow.com/questions/179713/how-to-change-the-href-for-a-hyperlink-using-jquery ) – Sand

+0

重复似乎不符合问题。 – PHPglue

回答

-2
$('.where-you-tune').load($(this).attr('href')); 

选择一个列表与类的元素。

分配“其中,你调”作为一个id:<div id="where-you-tune"></div>

和改变负载函数:

$('#where-you-tune').load($(this).attr('href')); 
+0

我试过了,还是得到了同样的错误:(Uncaught TypeError:$(...)。load不是一个函数 –

+1

这样做仍然有效,它只会对每一个HTML类加载一次'class ='where-you- tune''。 – PHPglue

0

您所示的代码包括2个版本的jQuery。它们相互冲突,导致你的jQuery根本无法工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 

jQuery的苗条分布是替代,不是使用以及主发行。

删除其中一个,你的代码工作正常 - 我已经在本地进行了验证。

相关问题