При нажатии на вкладку A покажите содержимое для вкладки A. Нажмите вкладку B, покажите контент для вкладки B и т.д.
Какой самый простой и совместимый способ построения фрагмента HTML?
Я не хочу использовать какие-либо библиотеки здесь, поэтому ни один из jQuery или других библиотек.
Если вы хотите перевернуть свой собственный элемент управления вкладкой, вы можете сделать что-то вроде этого:
<html>
<head>
<script type="text/javascript">
function activateTab(pageId) {
var tabCtrl = document.getElementById('tabCtrl');
var pageToActivate = document.getElementById(pageId);
for (var i = 0; i < tabCtrl.childNodes.length; i++) {
var node = tabCtrl.childNodes[i];
if (node.nodeType == 1) { /* Element */
node.style.display = (node == pageToActivate) ? 'block' : 'none';
}
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="javascript:activateTab('page1')">Tab 1</a>
</li>
<li>
<a href="javascript:activateTab('page2')">Tab 2</a>
</li>
...
</ul>
<div id="tabCtrl">
<div id="page1" style="display: block;">Page 1</div>
<div id="page2" style="display: none;">Page 2</div>
...
</div>
</body>
</html>
Вот список различных типов вкладок плюс учебники по их созданию
TabTastic - хороший путеводитель; он доступен и (когда JavaScript недоступен) терпит неудачу очень изящно.
Если вы хотите реализовать собственное представление табуляции, просто сделайте следующее:
<html>
<head>
<style>
.tab {
display:none;
}
</style>
<script type="text/javascript">
function initTabView(){
var x = document.getElementsByClassName('tab-view')
for(var i=0; i < x.length; i++) {
x[i].onclick = displayTab;
}
var prevViewedTab = null;
function displayTab(e) {
var idOfTabToDisplay = this.getAttribute("data-tab")
if(prevViewedTab) {
prevViewedTab.style.display = 'none';
}
var tabToDisplay = document.getElementById(idOfTabToDisplay);
tabToDisplay.style.display = 'block';
prevViewedTab = tabToDisplay;
}
var defaultTab = document.getElementsByClassName('default-tab')
if (defaultTab.length) {
defaultTab[0].style.display = 'block';
prevViewedTab = defaultTab[0];
}
}
</script>
</head>
<body>
<ul>
<li>
<a data-tab="tab1" class="tab-view">Tab 1</a>
</li>
<li>
<a data-tab="tab2" class="tab-view">Tab 2</a>
</li>
<li>
<a data-tab="tab3" class="tab-view">Tab 3</a>
</li>
<li>
<a data-tab="tab4" class="tab-view">Tab 4</a>
</li>
</ul>
<div id="tabCtrl">
<div class="tab default-tab" id="tab1">This is Tab 1</div>
<div class="tab" id="tab2">This is Tab 2</div>
<div class="tab" id="tab3">This is Tab 3</div>
<div class="tab" id="tab4">This is Tab 4</div>
</div>
<script>
initTabView();
</script>
</body>
</html>
Взгляните на пример, например this (любезно предоставлен поиском Google для просмотра с вкладками javascript).
Очевидно, вы можете использовать это с небольшой настройкой, но поучительно разобрать его и определить, что он делает. Он в основном включает или отключает <div> с помощью стиля display и устанавливает его на block или none
Виджет вкладок в jQuery UI прост в использовании: http://jqueryui.com/demos/tabs/.
Виджет вкладки jQuery полностью работает со стороны браузера - содержимое для всех вкладок отправляется по каждому запросу или вы можете написать код JavaScript, который использует Ajax для динамического загрузки содержимого вкладки.
Но это не подходит для вашего использования. Подумайте, нужно ли управлять вкладками на стороне сервера (то есть щелчок на вкладке отправляет новый запрос страницы на сервер - сервер строит HTML, который имеет визуальный внешний вид вкладок).
Если вы открыты для использования JavaScript, вкладка jQuery довольно хорошо.
Если "простые и совместимые" являются вашими двумя критериями, я бы предложил плагин jQuery UI Tabs. Кросс-браузер и встроенный cinch.
В зависимости от ваших амбиций это может быть просто неупорядоченный список и количество <div> (содержимое вкладки). Тогда простой JavaScript мог бы - с помощью getElementById() - установить свойство отображения для всех <div> s: none для всех, кроме текущего.
В качестве альтернативы вы можете посмотреть это.
Изменить: не единственный, ссылающийся на сайт jQuery, кажется:)