Как сделать вкладки на веб-странице?

Question

Как создать вкладки на веб-странице, чтобы при щелчке на вкладке вкладка изменялась css, но на странице щелчка также перезагружалась и CSS возвращалась к оригиналу.

Answer 1

не используйте jquery: D

все, что вам нужно, контейнер, содержащиеся в varable данные и вкладки

контейнер является жертвой изменений css. вкладки будут запускать процесс изменения.

если у вас есть статический контент, вы можете записать его в строку и просто загрузить из него. если у вас есть динамически генерируемый контент, вам нужно создать ajax-запрос для получения свежего контента, а затем сохранить его в той же строке в ожидании загрузки.

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

function load(data) {
    document.getElementById("victim").innerHTML = data;
}

function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";

element.style.background = "#f0f";
}

со статическим содержанием триггеры:

document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};

Если вы хотите изменить CSS, вам нужна другая функция, которая выполняет изменения.

Я говорю вам, не используйте JQuery, потому что вы не будете знать, что вы делаете.

но весь этот код можно заменить jquery следующим образом:

$("tab1").click(function(e) {
    $("#tab1 | #tab2").each(function() {
    $(this).css("background","#fff"); });
    $(this).css("background","#00f");
    $("#victim").append("static content 1");
});


$("tab12click(function(e) {
    $("#tab1 | #tab2").each(function() {
    $(this).css("background","#fff"); });
    $(this).css("background","#00f");
    $("#victim").append("static content 2");
});

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

Answer 2

JQuery UI Вкладки:

http://jqueryui.com/demos/tabs/

Answer 3

Если вы не хотите использовать Jquery для создания вкладок пользовательского интерфейса, см. Мой кросс-браузерный код JavaScript: GitHub .

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

Пример: Вкладка

Answer 4

Имейте тег <A href вокруг «вкладки» и используйте onClick для запуска Javascript, который изменяет CSS.