我将尝试将其分解，以便于理解我想要什么。
基本上，我有一个有很多页面的wordpress网站。我想做的是有一个名为"工作"的页面，然后在该页上我有一个链接到标题为"视频"，"音频"，"写作"answers"设计"的页面的子菜单。现在我想要发生的是，当你点击任何这些链接时，这些页面的内容取代了页面上的内容。显然，页眉，页脚和导航不会改变。
根据我收集到的信息，我需要使用AJAX来完成此操作。原因是我想让这些页面在WordPress中成为他们自己的独立页面。这样，当我去编辑"音频"页面时，只有该页面的内容被改变。 对于php、ajax、jQuery和Javascript，我完全是个新手。所以如果有人能给我解释一下，那就太棒了。到目前为止，我所收集到的是，我只需要刷新一个容器，它将保存所有的信息/内容。
例如:<div id="main">
<div id="menu">
<ul>
<!-- Each one of these will change the content below when clicked-->
<a href="#"><li>Nav item 1</li></a>
<a href="#"><li>Nav item 2</li></a>
<a href="#"><li>Nav item 3</li></a>
</ul>
</div>
<div id="page-content-here">
</div>
</div>
只是我不知道该怎么做。我所能找到的只是Ajax的一些片段，但由于我从未使用过它，所以我不知道它去了哪里或诸如此类的东西。
这是更方便的动态标签点击
<script>
(function(){
var index = {
init: function(){
//you could change the selector what ever you want to select
//the selector provided select all anchor tag with href="#"
$(document).on('click', "a[href='#']", this.exe_thisfunction);
},
exe_thisfunction: function(e){
var yourdata = '';
$.ajax({
url: 'sample.php',
data: yourdata, // this is optional
method: "post",
success: function(data){
//success do what ever you want
//the data is the content of the url requested
$('#page-content-here').html(data);
}
});
e.preventDefault();
}
}
index.init();
})();
注意了。在包含jQuery库之前，你只能使用jQuery。
Sample.php
<?php
echo "Content fetch!";
最简单的方法是:
<div id="main">
<div id="menu">
<ul>
<!-- Each one of these will change the content below when clicked-->
<a onclick="$('#page-content-here').load('url-to-whatever');"><li>Nav item 1</li></a>
<a onclick="$('#page-content-here').load('url-to-whatever-2');"><li>Nav item 2</li></a>
<a onclick="$('#page-content-here').load('url-to-whatever-3');"><li>Nav item 3</li></a>
</ul>
</div>
<div id="page-content-here">
</div>
</div>
请记住，#page-content-herediv将填充所请求的整个页面—而不仅仅是该页的内容。因此，不推荐使用这种方法，但应该可以让您了解所需的内容。