Question

我想更改为使用链接

在div中设置内容

我的HTML代码：

<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
</head>

<body>
<a href="dashboard.html">dashboard</a>
<a href="basic-info.html">basic-info</a>
<div id="content"></div>


<script src="scripts/links.js" type="text/javascript"></script>
</body>
</html>

我的JS代码：

//inside of links.js 
// JavaScript Document
$(document).ready(function() {
    $('#content').load("dashboard.html");
});

Answer 1

您需要将事件侦听器绑定到链接，还需要阻止默认操作，如下所示：

$(document).ready(function() {
    $('a').on('click', function(e) {
        e.preventDefault();//prevents following the link
        $('#content').load( this.href );
    });
});

Answer 2

您正在点击指向另一个文件的链接，因此浏览器正在尝试重定向到此文件。

您需要阻止链接的默认行为，并将其用作JS触发器以使用Ajax加载内容。

$('a').click(function(event) {
  event.preventDefault();
  var url = $(this).attr('href');

  $('#content').load(url);
  return false; 
});

通过链接尝试加载内容时，Jquery加载无效，重定向而不是更新

2 个答案: