Question

我有一个这样的菜单，但加价不一定要保持这种状态。

<div id="menu">
 <ul>
  <li><a href="#item1">Item 1</a></li>
   <ul>
   <li><a href="#subitem1">Subitem 1</a></li>
   </ul>
  <li><a href="#item2">Item 2</a></li>
 </ul>
</div>

每次单击其中一个菜单项时，我想在div中加载不同的内容 - 让我们称之为#content。

$(document).ready(function() {
  $('#menu li').click(function(){
      $('#content').load('content.txt');
  });
});

现在，如何将要加载的内容页面传递到#content？提前谢谢！

Answer 1

使用事件的preventDefault（）方法阻止点击进入页面，使用链接的href实际转到加载到#content div中的页面。

$(document).ready(function() {
    $('#menu a').click(function(e){
        $('#content').load($(this).attr('href'));
        e.preventDefault();
    });
});


<div id="menu">
 <ul>
  <li><a href="page1.html">Item 1</a></li>
   <ul>
   <li><a href="subpage1.html">Subitem 1</a></li>
   </ul>
  <li><a href="page2.html">Item 2</a></li>
 </ul>
</div>

Answer 2

您可以通过多种方式实现这一目标。实际上，您需要将URL与每个<li>项相关联。

举几个方面，您可以将它们存储在JavaScript数组中，在jQuery缓存中，即$(selector).data，在每个<li>元素内的隐藏输入中，作为{{{ 1}}元素。

Answer 3

我会使用jQuery UI's tab feature之类的东西来处理这个问题。它可能会更好地降级。

如果您需要手动执行此操作，最简单的路线可能是向锚点添加ID或rel属性，然后使用它来确定要加载的内容页面。

你可以使用“$（this）.attr（'blah'）;”在您的函数中访问这些属性。

Answer 4

在渐进增强的领域 - 您应该使链接指向具有各自内容的另一个页面。

然后您不仅可以将页面的全部内容加载到内容div中，还可以加载指定的元素。因此，如果其他页面中的#content div的内容需要如下：

$('#menu a').click(function(){
    $('#content').load($(this).attr('href') + ' #content');
});

应该这样做。

Answer 5

joelpittets解决方案的唯一问题是它会加载另一页的整个内容，这可能不是所希望的。但他确实记得取消点击链接的默认行为......

简单的jQuery AJAX问题

5 个答案: