Jquery три строки кода, чтобы достичь простой вкладки

Сегодня, мы понимаем, с помощью простого кода вкладки переключения, код только две основные линии.

Эффект:

 

Мышление: явный и неявный JQuery DIV стиля контролируется изменение переключения

   Что показывает, что ДИВ, остальные скрыты

Реализация:

<! DOCTYPE HTML > 
< HTML Ланг = "EN" > 
< голова > 
    < мета кодировка = "UTF-8" > 
    < название > Документ </ название > 
        < стиль > 
        * { маржа : 0 ; обивка : 0 ; } 
        #Content { 
            ширина : 200px ; 
            высота : 200px ; 
            граница :1px твердого вещества #ccc ; 
            переполнение : скрытый ; 
            Запас-топ : -1px ; 
        } 
        Кнопка { 
            границы : 1px твердый #ccc ; 
            не очертить : ни один ; 
        } 
        .Active { 
            фон : белый ; 
            граница дна : 1px твердый белый ; 
        } 
        #Content> DIV { 
            ширина : 200px ; 
            высота :200px ; 
        } 
    </ Стиль > 
</ голова > 
< тело > 
    < кнопка класс = "активный" >按钮1 </ кнопка > 
    < кнопка >按钮2 </ кнопка > 
    < кнопка >按钮3 </ кнопка > 
    < DIV ID = "содержание " > 
        < DIV >标签页11111 </ DIV > 
        < DIV >> 
        < Div > тег страница 3333 </ DIV > 
    </ DIV > 
</ тело > 
</ HTML > 
< Script Пульт SRC = "JQuery-1.11.3.js" > </ Script > 
< Script > 
$ ( " Button " ) .click ( функция () {
     // управления , чтобы изменить стиль текущей кнопки , чтобы добавить стиль, его родственную удаление брата всех стилей 
    $ ( в этом ) .addClass ( « активного » ) .siblings () removeClass (. « Активный » );
    //Div явное и неявное управление текущей кнопки , соответствующий DIV показало , что его брат на тот же уровень всех скрытые 
    $ ( « #content> DIV » ) .eq ($ ( это ) .index ()). CSS ( « Run дисплея » , « Блок » .) .siblings () CSS ( " дисплей " , " ни один " ); 
}) 
</ скрипт >

Просто, на самом деле, до тех пор, как идеи вышли не так уж трудно, меня попросили сегодня, как добиться этого, то, как вы пишете о. Мы надеемся помочь всем

рекомендация

отwww.cnblogs.com/suihang/p/11391862.html
рекомендация