ajax - 简单的 jQuery AJAX 问题

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() 方法防止点击转到页面，请使用实际转到加载到 #content div 中的页面的链接的 href。

$(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>