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

Question

[Zak]

Цель:

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

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

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

без 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 лаконичнее?



Демо, которое можно форкать.

Comments

[Zak]

Вот улучшенный вариант с учетом некоторых замечаний.

Answer 1

[egorinsk]

За ссылки с href=# надо отрывать руки. Что это за ссылка, которая никуда не ведет? Далее, при отключенном яваскрипте у вас будет пустая страница. далее, зачем тянуть 150-Кб тяжелый фреймворк, от которого айфон подвисает, ради табов?

Далее. Вот у вас написано

#wrapper div { display:none; }

Что, если внутри сождержимого таба есть еще дивы? А если внутри таба есть еще один блок табов? А?

Далее, а что если табов больше 3-х?

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

И что значит «без использования хешей»? Это почему еще?

К слову, табы можно сделать вообще без яваскрипта, но вам видимо еще до этого далеко. Также, верстку табов можно сделать семантичнее — погуглите, у Сергея Чикуенка была статья на эту тему.

Comments

[egorinsk]

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

Его вообще можно убрать.

[nano_freelancer]

За ссылки с href=# надо отрывать руки.

мсье решил переоткрыть ненавязчивый JavaScript?

и да, про селектор верно — стоило бы использовать, указывающий на прямых детей:

#wrapper>div { display:none; }

[egorinsk]

> стоило бы использовать, указывающий на прямых детей:

А еще хак для его эмуляции в Ие6 с 2 звездочками :) (хотя мне конечно страшно такие хаки юзать, говорят, звездочка тормозит, а 2 звездочки вообще старичка ИЕ могут наверно уронить).

Answer 2

[Zak]

>За ссылки с href=# надо отрывать руки.
Это не продакшн код, это ПРИМЕР, вам больше нравится href="javascript:;"?

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

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

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

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

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

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

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

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

Ах, как замечательно вы троллите.

Comments

[egorinsk]

> вам больше нравится href=«javascript:;»?

Все равно же получилась ссылка, которая никуда не ведет. Вас это не настораживает?

[Zak]

Нет, не настораживает. Рад тому, что другие пункты не вызывают вопросов.
Смотрел на табы от Сергея Чикуёнка, не очень нравится такое насилие над стилем тэга dd

    float: right;
    margin: 2em 0 0 -100%;
    position: relative;
    width: 100%;
    z-index: 2;

Answer 3

[Антон Попов]

Раньше делал такие табы jsfiddle.net/ademaro/S4kTx/:

<dl class="tabs">
    <dt class="active">Вкладка 1</dt>
    <dd class="active"><div>Содержимое 1</div></dd>
    <dt>Вкладка 2</dt>
    <dd><div>Содержимое 2</div></dd>
</dl> 
    
<script type="text/javascript">    
$(function(){
    $("dl.tabs dt").click(function(){
        $(this)
            .siblings().removeClass("active").end()
            .next("dd").andSelf().addClass("active");
    });
});
</script>

А вообще можно и без js: jsfiddle.net/ademaro/WwrsX/

Comments

[BarneyGumble]

А какой для Вашего примера есть самый простой и элегантный способ добавить плавность (fadein/fadeout) при переходе между вкладками?

Answer 4

[vajadhava]

Максимум совместимости, без JQuery UI тынц
Весь код, который нужно писать ВАМ:

<div class="tabbable">
    <ul class="nav nav-tabs">
    <li class="active"><a href="#1" data-toggle="tab">Section 1</a></li>
    <li><a href="#2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="1">
    <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="2">
    <p>Howdy, I'm in Section 2.</p>
    </div>
    </div>
</div>

Comments

[Zak]

Я еще раз повторяю, без использования хэшей

Answer 5

[Zak]

Вот очередной вариант

#wrapper div {
    display:none;
}
#wrapper a.active {
    color: black;
    cursor: default;
    font-weight: bold;
    text-decoration: none;
}
#wrapper div.active {
    display:block;
    width:100%;
}

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

    $('#wrapper a').click(function() {
        var click_id=$(this).attr('id');
        if (click_id != $('#wrapper a.active').attr('id') ) {
            $('#wrapper a').removeClass('active');
            $(this).addClass('active');
            $('#wrapper div').removeClass('active');
            $('#con_' + click_id).addClass('active');
        }
    });​

Answer 6

[DEViANCE]

Еще вариант

Comments

[Zak]

Спасибо, такое оставьте себе.

Answer 7

[Артур Кох]

jsfiddle.net/UWYxZ/

Мой вариант. jQuery можно и элегантнее написать, но суть, думаю, ясна

Comments

[Zak]

Интересный вариант, спасибо!
Не очень нравится show\hide внутри JS

[Артур Кох]

можно обойтись css('display','block/none')
или манипуляцией с классами.

Answer 8

[Артур Кох]

«А можно сделать CSS лаконичнее?» — убираем дубляж в css, и даем табам одинаковые классы.

На списках табы гораздо семантичнее.

Comments

[Zak]

В этом и был вопрос, покажите как убрать «дубляж»

[Артур Кох]

Zak показал ниже. Я думал это элементарно :)

[Артур Кох]

Т.е. вы и показали. Уже лучше.

Answer 9

[digdream]

а есть табы, чтобы можно было анкоры вставить и по ссылке открывать не первую вкладку, а ту, на которую ссылается якорь?

Comments

[Zak]

Когда я писал без использования хэшей я имел в виду анкоры/якоря.

Не вижу сложности внутри $(document).ready дополнительно обработать значение window.location.hash

У меня получилось вот так:

<html>
<script type="text/javascript" src="/js/jq.js"></script>
<style>
#wrapper div {
    display:none;
}
#wrapper a.active {
    color: black;
    cursor: default;
    font-weight: bold;
    text-decoration: none;
}
#wrapper div.active {
    display:block;
    width:100%;
}
</style>
<script type="text/javascript" >

$(document).ready(function(){
    $('#wrapper a').click(function() {
        var tab_id=$(this).attr('id');
        tabClick(tab_id);
    });
    
    tabClick(window.location.hash.substr(1));

    function tabClick(tab_id) {
        if (tab_id != $('#wrapper a.active').attr('id') ) {
            $('#wrapper a').removeClass('active');
            $('#'+tab_id).addClass('active');
            $('#wrapper div').removeClass('active');
           $('#con_' + tab_id).addClass('active');
        }    
    }
});
</script>

<body>

<div id="wrapper">
    <a href="#tab1" id="tab1" class="active">Вкладка 1</a>
    <a href="#tab2" id="tab2">Вкладка 2</a>
    <a href="#tab3" id="tab3">Вкладка 3</a>
    <div id="con_tab1" class="active">Содержимое 1</div>
    <div id="con_tab2">Содержимое 2</div>
    <div id="con_tab3">Содержимое 3</div>
</div>
</body>
</html>

Answer 10

[ChemAli]

Ну используйте вместо хешей атрибуты типа data-target=«targettab». Суть-то все равно не изменится: нужно где-то указывать целевую вкладку.

Answer 11

[Андрей]

jsfiddle.net/gxy45/24/ вот так
или вот так jsfiddle.net/EZea3/ =)

Comments

[Андрей]

имхо это симантично преобразовывать анкоры в табы

Answer 12

[Rive]

Noscript в Файрфоксе клик по табу принимает за Clickjacking.