Задать вопрос
Ответы пользователя по тегу HTML
  • Простые табы для сайта на jQuery, бывает еще проще?

    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 комментария
  • Простые табы для сайта на jQuery, бывает еще проще?

    Zak
    @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');
            }
        });​
    
    Ответ написан
    Комментировать