JQuery изменение содержимого без повторной загрузки страницы?

Question

Я хочу построить страницу с четырьмя подстраницами. Он автоматически начинается с первой подстраницы.

Когда пользователь нажимает на другую вкладку из подменю, я обычно создаю для нее другую страницу, но теперь ее большая страница с небольшим изменением содержимого в ней.

Я нашел функцию contents() в документации jQuery, но я не думаю, что это так.

Я думал, что, возможно, мне следует работать с 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> 

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 
}); 

Nicer Пример: http://jsfiddle.net/neuroflux/W8UQm/4/