javascript - 为什么不使用 jquery 在 HTML 中加载我的外部内容？

Question

我有一个带有垂直菜单的 HTML 页面。我想单击一个菜单项以在 div 标签内容项之间打开。

这是 HTML

 <div id="navigation">
  <ul id="list-links">
    <li ><a id="pollo" href="">Pollo</a></li>
    <li><a id="tacchino" href="">Tacchino</a></li>
    <li><a id="prodotti" href="">Prodotti</a></li>
</ul>

<div id="contentPro">

</div>

     </div>

这就是 JS：

        $('#list-links li a' ).click(function(){  
        $clicked = $(this);
        var idToLoad = $clicked.attr("id")
        var url=idToLoad+'.html';

         $('#contentPro').load(url);

});  

为什么外部 HTML 不能在 DIV 标记之间加载？谢谢

Answer 1

当您单击锚标记<a>页面时，页面会被重定向。您必须使用停止该操作event.preventDefault();

这是更新的代码

$('#list-links li a' ).click(function(event){
        event.preventDefault();       
        $clicked = $(this);
        var idToLoad = $clicked.attr("id")
        var url=idToLoad+'.html';

        $('#contentPro').load(url);
});

如果问题没有解决，那么您应该检查路径pollo.html是否tacchino.html正确prodotti.html？

Answer 2

将您的代码包装在ready事件中，例如

$(document).ready(function(){
    $('#list-links li a' ).click(function(e){ 
        e.preventDefault();
        $clicked = $(this);
        var idToLoad = $clicked.attr("id")
        var url=idToLoad+'.html';
        $('#contentPro').load(url);
     });
});