Сегодня, мы понимаем, с помощью простого кода вкладки переключения, код только две основные линии.
Эффект:
Мышление: явный и неявный 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 ( " дисплей " , " ни один " ); }) </ скрипт >
Просто, на самом деле, до тех пор, как идеи вышли не так уж трудно, меня попросили сегодня, как добиться этого, то, как вы пишете о. Мы надеемся помочь всем