Question

我希望将JQuery UI手风琴作为菜单，点击其中的条目，通过菜单旁边的DIV更新主要内容区域中的内容。

我需要添加什么才能调用JQuery AJAX以便更新主div？我真的更愿意保留并且不使用表单按钮来执行此操作。我已经在这里看了一下并且还搜索了一个解决方案，但我发现的答案要么是首先使用AJAX来生成手风琴，要么更新手风琴菜单本身 - 这些都没有帮助我解决问题。 / p>

请帮助我，我只是不知道该怎么做！谢谢！

代码：

$(function() {
  $("#nav").accordion({
    active: false,
    collapsible: true
  });
});

和

<div id="nav">
  <h3><a href="">Home</a></h3>
  <h3>Select below:</h3>
  <div>
    <ul>
      <li><a href="page1.php">This link shows the content of page 1</a></li>
    </ul>
  </div>
</div>

<div id="main">
This is the main content area:
Here is the default content shown when the page loads
and needs to be replaced when one of the menu entries
are selected but without loading the whole page, thus
via AJAX and DIV update; also the content is provided
via a PHP file that reads it out from a DB.
</div>

更新1 - 截至目前的完整工作代码：

的index.html：

<html>
<head>
<link href="../style.css" rel="stylesheet" type="text/css">
<script src="../jquery-1.8.3.js"></script>
<script src="../jquery-ui.js"></script>
</head>

<body>
<script type="text/javascript">
$(function() {
$("#nav").accordion({
active: false,
collapsible: true
});
});

jQuery(function($){
$("#nav").on("click", "a", function(event){
$('#main').load(this.href);
event.preventDefault();
});
});
</script>

<div id="nav">
<h3><a href="">Home</a></h3>
<h3>Select below:</h3>
<div>
<ul>
  <li><a href="loadContent.php?page=1">This link shows the content of page 1</a></li>
</ul>
</div>
</div>

<div id="main">
This is the main content area:
Here is the default content shown when the page loads
and needs to be replaced when one of the menu entries
are selected but without loading the whole page, thus
via AJAX and DIV update; also the content is provided
via a PHP file that reads it out from a DB.
</div>
</body>
</html>

和loadContent.php：

<?php
$request = $_REQUEST['page'];
if (!$request) {
$outputStr = "This is the default content...";
}
else {
$outputStr = "New content: 'page' value = ".$request;
}
exit($outputStr);
?>

Answer 1

您可以使用jQuery.load：

jQuery(function($){
    $("#nav").on("click", "a", function(event){
       $('#main').load(this.href);
       event.preventDefault();
    });
});

通过手风琴入口上的JQuery AJAX更改手风琴的div OUTSIDE中的内容（需要是<a href="">)</a>

1 个答案: