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>

THE JQUERY

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

Jquery更改内容而不重新加载页面？

1 个答案: