Как создать область с различными «страницами»?

Язык вашей клиентской стороны для изменения текущей страницы будет javascript. Других вариантов перекрестного браузера нет, если вы собираетесь менять клиентскую страницу страницы, не загружая при этом всю новую страницу с сервера.

Вот некоторые из возможностей с javascript:

1. Имейте все содержимое, присутствующее на исходной странице, и просто скройте/покажите блоки содержимого при нажатии каждой последовательной кнопки.

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

3. Используйте iframe и программно измените свойство .src на iframe для последовательной загрузки нового содержимого.

Вариант 1 является самым простым, если на главной странице не слишком много контента. Блоки содержимого можно легко скрыть, установив obj.style.display = "none" или показан с обратным obj.style.display = "block".

Вариант 2 немного более активен, так как вам нужно сделать AJAX-вызовы на ваш сервер для загрузки желаемого контента, а затем его необходимо вставить на страницу по мере удаления старого содержимого. С библиотекой, подобной jQuery, это немного легче для менее опытного программиста.

Вариант 3 также довольно прост в использовании, но не такой гибкий, поскольку iframe автоматически не соответствует высоте вашего контента, как это делает <div>, но у них есть то преимущество, что каждый последующий контент может быть просто мини-HTML-страницей на вашем сервере.

---

Здесь приведен рабочий пример варианта 1, где содержимое скрыто/показано с помощью простого javascript:

http://jsfiddle.net/jfriend00/6ZFUq/

В этом примере используются некоторые правила CSS, которые вызывают имя класса, а затем добавляется или удаляется имя класса из блока содержимого, чтобы этот блок отображался или скрывался.

HTML:

<button id="next">Next</button><br><br>

<div class="content active">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
<div class="content">Content 4</div>
<div class="content">Content 5</div>

CSS:

/* hide all content blocks by default */
.content {
    display: none;
}

.active {
    display: block;
}

Javascript (расположен непосредственно перед </body>):

// utility functions
function removeClass(elem, cls) {
    var str = " " + elem.className + " ";
    elem.className = str.replace(" " + cls + " ", " ").replace(/^\s+|\s+$/g, "");
}

function addClass(elem, cls) {
    elem.className += (" " + cls);
}


// install event handler on Next button
document.getElementById("next").addEventListener("click", function() {
    // get active page
    var active = document.querySelectorAll(".content.active")[0];
    var all = document.querySelectorAll(".content");
    // find the active one in the list
    var activeIndex;
    for (var i = 0; i < all.length; i++) {
        if (all[i] === active) {
            activeIndex = i;
            break;
        }
    }
    // show the next one (wrapping back around if necessary)
    var nextItem = all[(activeIndex + 1) % all.length];
    addClass(nextItem, "active");
    // hide the previous one
    removeClass(active, "active");
});

---

Чтобы показать вам преимущества использования библиотеки, такой как jQuery, здесь используются те же функции в jQuery:

http://jsfiddle.net/jfriend00/ts8Bz/

// install event handler on Next button
$("#next").click(function() {
    var next = $(".content.active").removeClass("active").next();
    if (next.length) {
        next.addClass("active");
    } else {
        $(".content").eq(0).addClass("active");
    }
});