Question

我有一个列表：

<ul id="yearMenu">
  <li>Select a year</li>
  <li><a href="AJAX/2010PR.html">2010</a> |</li>
  <li><a href="AJAX/2009PR.html">2009</a> |</li>
  <li><a href="AJAX/2008PR.html">2008</a> |</li>
  <li><a href="AJAX/2007PR.html">2007</a> |</li>
  <li><a href="AJAX/2006PR.html">2006</a> |</li>
  <li><a href="AJAX/2005PR.html">2005</a></li>
</ul>

下面另一个容器就是这个div：

<div id="tableContent" class="tabWrapp"></div>

以及以下加载函数：

$("#ul#yearMenu li a").click(function() {
  var $parent = $(this).parent();
  $parent.addClass("selected").siblings().removeClass("selected");
  var href = $(this).attr('href');
  $("#tableContent").load(href + " #tableContent ", function() {
    //need to do something here?
  });
});

但是所有链接都在另一个页面中打开。我需要做什么才能在#tableContent div中加载它？

Answer 1

尝试添加

return false;

到“click”处理程序的末尾。如果没有这个，将采用每个<a>标记的默认操作。

在事件对象上调用.preventDefault()会更好（更安全，有些人会说）：

$('#whatever').click(function(evt) {
  // ...
  evt.preventDefault();
});

这将允许事件冒泡但阻止<a>默认操作。

Answer 2

请勿使用href存储链接。使用像'data-link =“http://link.com”'

这样的自定义attr

<li><a data-link="AJAX/2010PR.html">2010</a> |</li>

所以，当你点击什么都不会发生。

在您的javascript代码中，您可以使用以下链接获取链接：

$(selector).attr("data-link");

然后将A组成链接，使用一些css。

这只是一种替代方式，但是使用“preventDefault（）”或“return false”，也可以正常使用。

Answer 3

试试这个：

$("ul#yearMenu li a").click(function(event) {
  var $parent = $(this).parent();
  $parent.addClass("selected").siblings().removeClass("selected");
  var href = $(this).attr('href');
  $.get(href, function(data) {
    $('#tableContent').html(data);
  });
  event.preventDefault();
});

无法获取jQuery .load以将内容加载到div中

3 个答案: