В этом руководстве объясняется, как создавать вкладки с помощью CSS и JavaScript.
Как создавать вкладки с помощью CSS и JavaScript?
В этом разделе приведены пошаговые инструкции по созданию вкладок с помощью CSS и JavaScript.
Шаг 1. Создайте структуру вкладок с помощью HTML
Сначала посмотрите на HTML-код, который создает структуру HTML-табов:
< идентификатор деления '=' 'таб1' по щелчку '=' 'первый()' > Дом div >
< идентификатор деления '=' 'таб2' по щелчку '=' 'второй();' > О div >
< идентификатор деления '=' 'таб3' по щелчку '=' 'третий();' > Связаться с нами div >
< бр />
< идентификатор деления '=' 'продолжение1' > Добро пожаловать в Linuxhint ! div >
< идентификатор деления '=' 'продолжение2' > ТЕХНОЛОГИЧЕСКОЕ ОБРАЗОВАНИЕ
Мы создали множество продуктов, которые помогут вам узнать о Linux, программировании, информатике и многом другом.
div >
< идентификатор деления '=' 'продолжение3' >
Вы можете связаться с нашей командой по адресу редактора AT linuxhint DOT com.
div >
В приведенных выше строках кода:
- « <дел> Тег » добавляет элемент div с идентификатором «tab1» и прикрепленным « по щелчку ” событие для выполнения связанного “ первый() » функционирует при нажатии на нее. Этот элемент действует как вкладка HTML.
- Вышеупомянутый метод выполняется для следующих двух элементов div.
- «
Тег » добавляет разрыв строки. - « <дел> Тег «» снова вставляет элемент div с назначенным идентификатором «cont1». Этот элемент показывает содержимое созданной вкладки в блоке.
- Следующие два» <дел> Теги » также добавляют элементы div с присвоенными им идентификаторами.
Шаг 2. Оформление вкладок с помощью CSS
Теперь примените свойства стиля CSS, чтобы настроить вкладки и их содержимое по вашему выбору:
< стиль >
#tab1, #tab2, #tab3 {
плавать : левый ;
прокладка : 5 пикселей 10 пикселей 5 пикселей 10 пикселей ;
фон : Оранжево-красный ;
цвет : #FFFFFF ;
допуск : 0 пикселей 5 пикселей 0 пикселей 5 пикселей ;
курсор : указатель ;
граница - радиус : 3 пикселя ;
}
#tab1 : наведите курсор, #tab2 : наведите курсор, #tab3 : зависать {
фон : зеленый ;
}
#продолжение1, #продолжение2, #продолжение3 {
ширина : 300 пикселей ;
высота : 100 пикселей ;
прокладка : 40 пикселей ;
шрифт - размер : середина ;
шрифт - семья : «Таймс Нью Роман» , Таймс, с засечками ;
граница : 2px сплошной оранжевыйкрасный ;
граница - радиус : 7 пикселей ;
отображать : никто ;
}
стиль >
В указанном фрагменте кода:
- Во-первых, получите доступ к « вкладки », используя присвоенные им идентификаторы, и настраивайте их с помощью следующих свойств стиля (float, отступы, фон, цвет, поля: 0px 5px 0px 5px, курсор и радиус границы).
- Далее прикрепите « зависать » обработчик событий с вкладками для изменения цвета фона при наведении на них курсора мыши.
- После этого получите доступ к « содержимое вкладок », хранящиеся в элементах div с идентификаторами «cont1», «cont2» и «cont3». Теперь примените к ним следующие свойства стиля (ширина, высота, отступы, размер шрифта, семейство шрифтов, граница, радиус границы и отображение).
Шаг 3. Добавьте функциональные возможности вкладкам с помощью JavaScript
Наконец, добавьте функциональность созданным вкладкам с помощью JavaScript:
< сценарий >
функция в первую очередь ( ) {
документ. getElementById ( 'продолжение1' ) . стиль . отображать '=' 'блокировать' ;
документ. getElementById ( 'продолжение2' ) . стиль . отображать '=' 'никто' ;
документ. getElementById ( 'продолжение3' ) . стиль . отображать '=' 'никто' ;
}
функция вторая ( ) {
документ. getElementById ( 'продолжение2' ) . стиль . отображать '=' 'блокировать' ;
документ. getElementById ( 'продолжение1' ) . стиль . отображать '=' 'никто' ;
документ. getElementById ( 'продолжение3' ) . стиль . отображать '=' 'никто' ;
}
функция третья ( ) {
документ. getElementById ( 'продолжение3' ) . стиль . отображать '=' 'блокировать' ;
документ. getElementById ( 'продолжение1' ) . стиль . отображать '=' 'никто' ;
документ. getElementById ( 'продолжение2' ) . стиль . отображать '=' 'никто'
}
сценарий >
Вышеуказанные строки кода:
- Определите функцию с именем « первый ».
- В этом определении функции « документ.getElementById() Метод ” обращается к элементу div с идентификатором “cont1” и применяет метод “ стиль ” недвижимость с “ блокировать »оцените это. Это свойство будет отображать содержимое вкладки, на которую нажимает пользователь.
- Затем «document.getElementById()» обращается к другому элементу div и применяет свойство «style» со значением «none», чтобы скрыть его. Он скроет этот элемент на веб-странице.
- Вышеупомянутый метод выполняется для следующих элементов div, к которым осуществляется доступ. Это связано с тем, что «первая» функция отображает только содержимое вкладки, значение свойства «стиль» которой равно «блок», и скрывает остальные.
- Вышеописанная процедура выполняется для следующих функций «вторая()» и «третья()».
Выход
Видно, что вкладки успешно созданы и отображают соответствующее содержимое при щелчке пользователя.
Заключение
Чтобы создать вкладки, сначала создайте их структуры, используя «HTML», а затем настройте их с помощью свойств стиля CSS. Свойства стиля добавляются без экспорта какой-либо дополнительной таблицы стилей. Эти свойства делают вкладки привлекательными и привлекательными. После создания и настройки вкладок используйте язык программирования JavaScript, чтобы добавить к ним функциональные возможности. В этом руководстве практически объяснена полная процедура создания вкладок с помощью CSS и JavaScript.