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

Question

我想建立一个有四个子页面的页面。它会自动从第一个子页面开始。

当用户从子菜单中单击另一个选项卡时，我通常会为它创建一个不同的页面，但现在它是一个大页面，其中的内容只有一点点变化。

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

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

另外我想知道是否仍然可以使用 4 个不同的 wordpress 页面。

谢谢 ：）

Answer 1

您可以在一个页面上创建所有内容并使用 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>

查询

$('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
});

更好的例子：http: //jsfiddle.net/neuroflux/W8UQm/4/