Jquery在不重新加载页面的情况下更改内容？

我想构建一个包含四个子页面的页面。 它自动从第一个子页面开始

当用户单击子菜单中的另一个选项卡时，我通常会为它创建一个不同的页面，但现在它是一个大页面，只对其中的内容进行了一点更改

我在jQuery文档中找到了contents（）函数，但我认为不是这样

我在想也许我应该使用iFrame，因为我在stackoverflow上看到了一些关于它的问题，但我仍然不知道如何更改内容

我还想知道是否还有可能使用4个不同的wordpress页面来实现这一点

---

谢谢：）

您可以在一个页面上创建所有内容，并使用jQuery隐藏和显示每个元素：

CSS

.hideme { display: none; }
#div1 {
    width: 300px;
    height: 300px;
    background-color: lightgreen;
}
#div2 {
    width: 300px;
    height: 300px;
    background-color: lightblue;
}
#div3 {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

HTML文件

<a href="#" name="div1">div one</a>
<a href="#" name="div2">div two</a>
<a href="#" name="div3">div three</a>

<div id="div1" class="box">Some content 1</div>
<div id="div2" class="box hideme">Some content 2</div>
<div id="div3" class="box hideme">Some content 3</div>

---

更好的示例：

我猜有人对这个问题投了反对票，因为不清楚你是否试图自己解决这个问题。查找Ajax，你会发现很多关于如何在不重新加载整个内容的情况下更新页面的教程。我用一个稍微好一点的实现更新了我的答案。Ian，我搜索了它并试图解决它。但我只是不知道该去哪里搜索。。所以，这就是为什么我的问题可能有点不清楚的原因：（谢谢，我没有想到这一点。！！我今天要试试：）

$('a').on('click', function() {
    var thisDiv = $(this).attr('name'); //get the name value
    $('.box').css('display','none'); //change all "boxes" to hidden
    $('#' + thisDiv).css('display','block'); //get specific box and unhide
});