вертикальные вкладки без JQuery UI

Question

Я не знаю, в правильном ли я месте, чтобы задать этот вопрос.

Я ищу примеры или учебные материалы с вертикальными или боковыми вкладками, где содержимое отображается сбоку. Как и обычное содержимое с вкладками, но на этот раз сбоку (желательно слева). Но похоже, что в Интернете нет ни единой вещи, даже с использованием Google. Поэтому я потерян.

Или, может быть, я не знаю название этой техники.

Также я не хочу использовать jquery ui для этого.

Может кто-нибудь показать мне путь, пожалуйста?

Большое спасибо

Answer 1

Без jQueryUI вы можете сделать что-то очень простое и чистое, как это (demo => http://jsfiddle.net/steweb/zwaBx/)

Разметка:

<ul id="tabs-titles">
    <li class="current"> <!-- default (on page load), first one is currently displayed -->
        first
    </li>
    <li>
        second
    </li>
    <li>
        third
    </li>
</ul>
<ul id="tabs-contents">
    <li>
        <div class="content">first content first content first content</div>
    </li>
    <li>
        <div class="content">second content</div>
    </li>
    <li>
        <div class="content">third content</div>
    </li>
</ul>

CSS :

#tabs-titles{
    float:left;
    margin-right:10px;
}
#tabs-titles li{
    cursor:pointer;
}
#tabs-titles li.current{
    font-weight:bolder;
}
#tabs-contents{
    background:#F2F2F2;
    margin-left:100px;
    padding:5px;
}
#tabs-contents li{
    display:none;
}
#tabs-contents li:first-child{
    display:block; /* first one content displayed by default */
}

JS : (простой jQuery, без пользовательского интерфейса)

var tabs = $('#tabs-titles li'); //grab tabs
var contents = $('#tabs-contents li'); //grab contents

tabs.bind('click',function(){
  contents.hide(); //hide all contents
  tabs.removeClass('current'); //remove 'current' classes
  $(contents[$(this).index()]).show(); //show tab content that matches tab title index
  $(this).addClass('current'); //add current class on clicked tab title
});

Answer 2

Вот один из многих бесплатных уроков: Вертикальные вкладки для любителей jQuery!

Answer 3

Я нашел это в чистом javascript без jquery:

http://webdevel.blogspot.com/2009/03/pure-accessible-javascript-tabs.html

Еще не проверял.Я также нашел этот, который не использует jquery, но использует html5 и css3:

http://www.my -html-codes.com / javascript-tabs-html-5-css3

Кажется, моя самая удачная поисковая фраза по этой теме - "чистые вкладки JavaScript" (без кавычек, конечно).Вы найдете те, что выше, плюс некоторые другие, если вы запустите этот поиск.

Answer 4

Найден пример с использованием пользовательского интерфейса jQuery

http://jquery -ui.googlecode.com / svn / trunk / demos / tabs / vertical.html

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