Задать вопрос
Zak
@Zak
javascript

Простые табы для сайта на jQuery, бывает еще проще?

Цель:

Минимум кода,

максимум совместимости,

без использования хэшей,

без jQ UI



Текущий вариант реализации:

#wrapper div {<br>
    display:none;<br>
}<br>
#wrapper.tab1 div.tab1 {<br>
    display:block;<br>
    width:100%;<br>
}<br>
#wrapper.tab2 div.tab2 {<br>
    display:block;<br>
    width:100%;<br>
}<br>
#wrapper.tab3 div.tab3 {<br>
    display:block;<br>
    width:100%;<br>
}<br>
#wrapper.tab1 a.tab1 {<br>
    color: black;<br>
    cursor: default;<br>
    font-weight: bold;<br>
    text-decoration: none;<br>
}<br>
#wrapper.tab2 a.tab2 {<br>
    color: black;<br>
    cursor: default;<br>
    font-weight: bold;<br>
    text-decoration: none;<br>
}<br>
#wrapper.tab3 a.tab3 {<br>
    color: black;<br>
    cursor: default;<br>
    font-weight: bold;<br>
    text-decoration: none;<br>
}<br>


<div id="wrapper" class="tab1"><br>
    <a href="#" class="tab1">Вкладка 1</a><br>
    <a href="#" class="tab2">Вкладка 2</a><br>
    <a href="#" class="tab3">Вкладка 3</a><br>
<br>
    <div class="tab1">Содержимое 1</div><br>
    <div class="tab2">Содержимое 2</div><br>
    <div class="tab3">Содержимое 3</div><br>
</div>​<br>


$('#wrapper a').click(function() {<br>
        if ($(this).attr('class') != $('#wrapper').attr('class') ) {<br>
            $('#wrapper').attr('class',$(this).attr('class'));<br>
        }<br>
    });​<br>
<br>




Вопрос:

А можно сделать CSS лаконичнее?



Демо, которое можно форкать.
  • Вопрос задан
  • 65531 просмотр
1 комментарий
Подписаться 36 Оценить 1 комментарий
Ответ пользователя Zak К ответам на вопрос (12)
Zak
@Zak Автор вопроса
>За ссылки с href=# надо отрывать руки.
Это не продакшн код, это ПРИМЕР, вам больше нравится href="javascript:;"?

>Что, если внутри сождержимого таба есть еще дивы?
Добавлю сверху класс tab_item и напишу
#wrapper div.tab_item { display:none; }
#wrapper div { display:none; }

>зачем тянуть 150-Кб тяжелый фреймворк, от которого айфон подвисает, ради табов?
Я не собираюсь писать страницы для айфонов, мне от Jq нет смысла отказываться.

>А если внутри таба есть еще один блок табов?
Выкрутимся как-нибудь :) Не собираюсь писать универсальное решение там, где это не нужно.

>Далее, а что если табов больше 3-х?
Да хоть 10, вот пример

>… на уровне школьника, который впервые прочел сайт htmlbook.ru и захотел что-то сотворить.
>С кучей ошибок. Плохо, короче говоря.
Спасибо, ваше мнение очень важно для меня. Приведите свое решение здесь.

>И что значит «без использования хешей»? Это почему еще?
я имел в виду анкоры (якоря), просто у меня анкоры используются для других задач.

> вообще без яваскрипта, но вам видимо еще до этого далеко
Куда уж мне :)

>А можно сделать CSS лаконичнее? Его вообще можно убрать
Отличная идея, верстальщик мне спасибо скажет :)

Ах, как замечательно вы троллите.
Ответ написан
2 комментария
2 комментария