Задать вопрос

Простые табы для сайта на 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 просмотр
Подписаться 36 Оценить 1 комментарий
Ответ пользователя DEViANCE К ответам на вопрос (12)