Мне нужны вкладки вдоль левой стороны страницы, а не сверху. Я уже загружаю jQuery по другим причинам (эффектам), поэтому я предпочитаю использовать jQuery для другой инфраструктуры пользовательского интерфейса. Поиски "вертикальных вкладок jquery" дают ссылки на незавершенные работы.
Получается, что вертикальные вкладки работают в браузерах чревато, или это так тривиально, что, как только у вас есть решение, кажется, не стоит публиковать пример кода?
Посмотрите вертикальный вкладка jQuery UI. Я пробовал, он работал нормально.
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
<script>
$(document).ready(function() {
$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
});
</script>
Попробуйте здесь:
http://www.sunsean.com/idTabs/
Взгляд на вкладку "Свобода" может иметь то, что вам нужно.
Сообщите мне, если вы найдете что-то, что вам нравится. Несколько месяцев назад я работал над той же проблемой и решил реализовать себя. Мне нравится то, что я сделал, но было бы неплохо использовать стандартную библиотеку.
Я создал вертикальное меню и вкладки, изменяющиеся в середине страницы. Я изменил два слова на исходный код, и я выделил два разных div
меню:
<div class="arrowgreen">
<ul class="tabNavigation">
<li> <a href="#first" title="Home">Tab 1</a></li>
<li> <a href="#secund" title="Home">Tab 2</a></li>
</ul>
</div>
Содержание:
<div class="pages">
<div id="first">
CONTENT 1
</div>
<div id="secund">
CONTENT 2
</div>
</div>
код работает с div div
$(function () {
var tabContainers = $('div.pages > div');
$('div.arrowgreen ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.arrowgreen ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
//o_O\\ (Poker Face) i know its late
просто добавьте стиль ниже CSS
<style type="text/css">
/* Vertical Tabs ----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>
ОБНОВЛЕНО! http://jqueryui.com/tabs/#vertical
Я бы не ожидал, что вертикальные вкладки нуждаются в разных Javascript с горизонтальных вкладок. Единственное, что было бы иначе, это CSS для представления вкладок и содержимого на странице. JS для вкладок обычно не больше, чем отображение/скрытие/, возможно, загрузка содержимого.
Еще одним вариантом является плагин Matteo Bicocchi jQuery mb.extruder: http://pupunzi.open-lab.com/mb-jquery-components/jquery-mb-extruder/
супер простая функция, которая позволит вам создать свою собственную структуру вкладки/аккордеона здесь: http://jsfiddle.net/nabeezy/v36DF/
bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) {
//Dependent on jQuery
//PARAMETERS
//tabClass: 'the class name of the DOM elements that will be clicked',
//tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)',
//contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked',
//contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)',
//MUST call bindSets() after dom has rendered
var tabs = $('.' + tabClass);
var tabContent = $('.' + contentClass);
if(tabs.length !== tabContent.length){console.log('JS bindSets: sets contain a different number of elements')};
tabs.each(function (index) {
this.matchedElement = tabContent[index];
$(this).click(function () {
tabs.each(function () {
this.classList.remove(tabClassActive);
});
tabContent.each(function () {
this.classList.add(contentClassHidden);
});
this.classList.add(tabClassActive);
this.matchedElement.classList.remove(contentClassHidden);
});
})
tabContent.each(function () {
this.classList.add(contentClassHidden);
});
//tabs[0].click();
}
bindSets('tabs','active','content','hidden');
Посмотрите Listamatic. Вкладки семантически представляют собой список элементов, созданных определенным образом. Вам даже не обязательно нужен javascript, чтобы вертикальные вкладки работали как различные примеры в шоу Listamatic.