Разное

Вкладки html – Создание вкладок при помощи HTML и CSS

01.03.2019

Создание вкладок при помощи HTML и CSS

28

135

В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.

Вкладки, как правило, используются для экономии места при размещении большого количества информации на одной страничке.

При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.

Наш скрипт является легким и быстрым т.к. не использует JavaScript код или какие-либо плагины и библиотеки.

Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:


Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление так же можно легко изменить.

При создании вкладок HTML разметка вкладок выглядит следующим образом:

HTML код:

<div class="tabs">
    <input type="radio" name="inset" value="" id="tab_1" checked>
    <label for="tab_1">Вкладка №1</label>

    <

input type="radio" name="inset" value="" id="tab_2">
    <label for="tab_2">Вкладка №2</label>

    <

input type="radio" name="inset" value="" id="tab_3">
    <label for="tab_3">Вкладка №3</label>

    <

input type="radio" name="inset" value="" id="tab_4">
    <label for="tab_4">Вкладка №4</label>

    <

div id="txt_1">
        <p>Произвольное содержимое...</p>
        <p>Произвольное содержимое...</p>
        <p>Произвольное содержимое...</p>
    </div>
    <div id="txt_2">
        <p>Вторая вкладка</p>
    </div>
    <div id="txt_3">
        <p>Размеры содержимого вкладок</p>
        <p>могут отличаться по высоте!</p>
    </div>
    <div id="txt_4">
        <img src="image/logo.png" width="533" height="77" alt="Лого">
    </div>
</div>

Для того чтобы вкладки функционировали и были похожи на те, что приведены в примере выше, в шапке сайта между тегами <head> и </head> добавьте следующие стили оформления:

HTML код:

<style type="text/css">
.tabs { width: 100%; padding: 0px; margin: 0 auto; }
.tabs>input { display: none; }
.tabs>div {
    display: none;
    padding: 12px;
    border: 1px solid #C0C0C0;
    background: #FFFFFF;
}
.tabs>label {
    display: inline-block;
    padding: 7px;
    margin: 0 -5px -1px 0;
    text-align: center;
    color: #666666;
    border: 1px solid #C0C0C0;
    background: #E0E0E0;
    cursor: pointer;
}
.tabs>input:checked + label {
    color: #000000;
    border: 1px solid #C0C0C0;
    border-bottom: 1px solid #FFFFFF;
    background: #FFFFFF;
}
#tab_1:checked ~ #txt_1,
#tab_2:checked ~ #txt_2,
#tab_3:checked ~ #txt_3,
#tab_4:checked ~ #txt_4 { display: block; }
</style>

В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.

Дата создания: 17:14:04 04.12.2016 г.

Дата обновления: 17:14:04 04.12.2016 г.

Посещений темы: 23609 раз(а).


Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

usefulscript.ru

Как сделать вкладки в HTML

Вы здесь: Главная — JavaScript — JavaScript Основы — Как сделать вкладки в HTML

Сегодня мы создадим три вкладки (tabs), переключаясь между которыми, поочередно будет скрываться или снова показываться, содержимое всех вкладок.

В каких случаях целесообразно размещать контент на сайте во вкладках?

Первая причина – в целях экономии места на странице. Вторая причина – когда содержимое сайта разнородное. В большинстве случаев, обе причины, склоняют нас к использованию вкладок (табов) на сайте.

Я знаю, что начинающие веб-разработчики, «шарахаются» от нативного способа (с применением

JS) делать подобные вкладки. Предпочитая, не вникать в технические детали, хватаются за готовый плагин на jQuery (смотрите урок по Easytabs) или берут готовый компонент на Bootstrap.

Однако этот урок посвящается тем смельчакам, которые не прячут голову в песок, а хотят разобраться в механизме переключения между вкладками. Особенно, урок будет полезен изучающим JavaScript. Пользуясь случаем, не могу не посоветовать видео-курс по JavaScript.

Демонстрация вкладок

HTML код вкладки

Внутри контейнера див с классом tab, создадим 3 кнопки-ссылки (названия городов) с классом tablinks, заранее повесим на кнопки события по клику и дадим название функции

openCity. При клике по кнопке отработает эта функция, первым аргументом события будет — event.

<div>
  <button>Москва</button>
  <button>Берлин</button>
  <button>Пекин</button>
</div>

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

<div>
  <h4>Москва</h4>
  <p>Москва это столица России.</p>
</div>
<div>
  <h4>Берлин</h4>
  <p>Берлин это столица Германии.</p>
</div>
<div>
  <h4>Пекин</h4>
  <p>Пекин это столица Китая.</p>
</div>

CSS код вкладки

See the Pen Tabs with CSS and JavaScript by porsake (@porsake) on CodePen.


Комментарии для CSS кода

1) Зададим для блока с классом tab контейнера цвет фона и рамку.
2) Сделаем кнопки-переключатели button с тем же фоном, без рамок, с отступами для названий городов и плавным переходом.

3) Поменяем цвет фона при наведении на кнопки button:hover.
4) Зададим цвет фона и цвет ссылки для активной кнопки вкладки button.active.
5) Сделаем блоки с контентом tabcontent невидимыми с отсутствующей верхней рамкой.


JS код вкладки

See the Pen Tabs with CSS and JavaScript by porsake (@porsake) on CodePen.


Комментарии для JS кода

1) Объявим все переменные.
2) Получим все элементы с классом

tabcontent и спрячем их.
3) Получим все элементы с классом tablinks и удалим активный класс.
4) Покажем текущую вкладку и добавим активный класс на кнопку, которая откроет вкладку с ID по названию города.

  • Создано 03.12.2018 10:02:31
  • Михаил Русаков
Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:
    <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru//images/button.gif» alt=»Как создать свой сайт» /></a>

    Она выглядит вот так:

  2. Текстовая ссылка:
    <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):
    [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

Создание вкладок (табов). Урок 1

От автора: в данном уроке мы с Вами поговорим о создании табов на сайте. Табы — это ни что иное, как вкладки, позволяющие вместить большой объем информации, используя минимальный объем места. Вкладки очень естественно смотрятся, к примеру, в интернет-магазинах. Там в них часто помещают информацию о товаре: характеристики, описание товара и т.д.

Библиотека jQuery UI предлагает нам виджет Табы (http://jqueryui.com/tabs/), позволяющий с легкостью реализовать необходимый функционал. Однако, если вы не хотите подключать дополнительную библиотеку, если хотите реализовать вкладки, что называется с нуля, то данный урок как раз то, что вам нужно.

В данном уроке мы с вами создадим необходимую для табов разметку, а также напишем стили, позволяющие оформить табы соответствующим образом. При этом это не обязательно может быть «табовое» оформление… мы вполне можем использовать функционал урока для создания сайта-визитки, где контент страницы — это контент вкладки, ну а каждая конкретная вкладка — это ни что иное, как пункт меню. В общем, мы ограничены лишь нашей фантазией.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Итак, давайте начнем с разметки, которая может быть примерно такой:

<!doctype html> <html lang=»en»> <head> <meta charset=»UTF-8″> <title>Табы</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <div> <div> <ul> <li><a href=»#tabs-1″>Таб 1</a></li> <li><a href=»#tabs-2″>Таб 2</a></li> <li><a href=»#tabs-3″>Таб 3</a></li> </ul> </div> <div> <div> <p>Вкладка 1</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p> </div> <div> <p>Вкладка 2</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p> </div> <div> <p>Вкладка 3</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p> </div> </div> </div> </body> </html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!doctype html>

<html lang=»en»>

<head>

<meta charset=»UTF-8″>

<title>Табы</title>

<link rel=»stylesheet» href=»style.css»>

</head>

<body>

<div>

<div>

<ul>

<li><a href=»#tabs-1″>Таб 1</a></li>

<li><a href=»#tabs-2″>Таб 2</a></li>

<li><a href=»#tabs-3″>Таб 3</a></li>

</ul>

</div>

<div>

<div>

<p>Вкладка 1</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>

</div>

<div>

<p>Вкладка 2</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>

</div>

<div>

<p>Вкладка 3</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, officiis ut hic voluptate inventore natus molestiae! Ut, voluptate maxime facere officia animi id quod perspiciatis nam officiis et. Nisi, nesciunt!</p>

</div>

</div>

</div>

 

</body>

</html>

Давайте немного разберем созданную структуру вкладок. Каждая вкладка представляет из себя элемент списка. Название вкладки помещено в ссылку, якорь которой является здесь ключевым. Дело в том, что по якорю ссылки мы можем связать вкладку с ее текстом. Тексты вкладок помещены в блок с идентификаторами, которые попросту дублируют якоря ссылок.

Например, мы имеем ссылку с якорем #tabs-1. Также у нас есть текст в блоке с идентификатором #tabs-1. Это и есть та самая связь вкладки с ее текстом.

Теперь остается оформить наши табы, добавив несколько стилевых правил в файл стилей:

*{margin: 0; padding: 0;} .wrapper{ width: 500px; margin: 50px auto; } #tabs{ width: 100%; } #tabs ul{ list-style: none; display: table-row; } #tabs ul li{ display: table-cell; background: #ccc; height: 40px; text-align: center; border-left: 5px solid #fff; } #tabs ul li:first-child{ border-left: none; background: #f3f3f3; } #tabs ul li a{ display: table-cell; width: 500px; height: 40px; line-height: 40px; color: #000; text-decoration: none; font-size: 20px; } #tabs ul li a:hover{ color: #e8117f; } .tab-content{ border: 10px solid #f3f3f3; } .tabs-text{ padding: 10px; /*display: none;*/ }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

*{margin: 0; padding: 0;}

.wrapper{

width: 500px;

margin: 50px auto;

}

#tabs{

width: 100%;

}

#tabs ul{

list-style: none;

display: table-row;

}

#tabs ul li{

display: table-cell;

background: #ccc;

height: 40px;

text-align: center;

border-left: 5px solid #fff;

}

#tabs ul li:first-child{

border-left: none;

background: #f3f3f3;

}

#tabs ul li a{

display: table-cell;

width: 500px;

height: 40px;

line-height: 40px;

color: #000;

text-decoration: none;

font-size: 20px;

}

#tabs ul li a:hover{

color: #e8117f;

}

.tab-content{

border: 10px solid #f3f3f3;

}

.tabs-text{

padding: 10px;

/*display: none;*/

}

В результате мы получили классические вкладки (табы). Осталось реализовать переключение между вкладками, добавив табам необходимый функционал. В следующем уроке мы с вами напишем несложный скрипт, который реализует необходимый функционал.

На этом текущий урок завершен. До встречи в следующем уроке. Удачи!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

Создание вкладок с помощью HTML + CSS

В данном материале представлены переключатели вкладок, где созданы с помощью HTML и CSS, что простой и удобный формат для содержания информации. Такой тип переключателей (табы) в большинстве используют для того, чтоб сохранить место, так как в них можно содержать очень много разной информации.

Если брать интернет магазин, то ставя в материал они распределяют в категории, это описание, потом переключают и идет характеристика на тот или иной товар и так далее. Вообще очень удобный формат при размещении большого количества информации, всего на одной страницы.

Это большой плюс для любой тематики сайта, где не нужно ходить по сайту и искать, а все разместить компактно по вкладкам в одном месте. Вам не прядется делать перезагрузку страниц, так как зайдя, все переключатели работают автономно.

Если по умолчанию идут в кнопках цифры, то можно поставить шрифтовые иконки, как на таких вкладках, или написать ключевые слова. Все проверено на работоспособность, где отлично отображается и все функций в действие.

Приступаем к установке:

HTML

Код

<ul>
  <li><a href=»#nateng»>1</a></li>
  <li><a href=»#ngustomes»>2</a></li>
  <li><a href=»#meserence»>3</a></li>
  <li><a href=»#ngepoduc»>4</a></li>
  <li><a href=»#provided»>5</a></li>
</ul>
<div>
<ul>
  <li>
  <div>ZorNet — портал для вебмастера 1-й вкладки</div>
  </li>
  <li>
  <div>ZorNet — портал для вебмастера 2-й вкладки</div>
  </li>
  <li>
  <div>ZorNet — портал для вебмастера 3-й вкладки</div>
  </li>
  <li>
  <div>ZorNet — портал для вебмастера 4-й вкладки</div>
  </li>
  <li>
  <div>ZorNet — портал для вебмастера 5-й вкладки</div>
  </li>
</ul>
</div>


CSS

Код

.gtevyoukam-unarketing {
  margin-bottom: 17px;
}
.gtevyoukam-unarketing li {
  display: inline-block;
  background-color: #423f3f;  
}
.gtevyoukam-unarketing li a {
  color: #dedee4;
  text-decoration: nnateng;
  display: inline-block;
  padding: 0 9px;
  height: 27px;
  line-height: 27px;
}
.gtevyoukam-unarketing-content {
width:635px;
  height:100px;
  overflow:hidden;
}
.gtevyoukam-unarketing-content ul {
  list-style: nnateng;
  height: 120px;
  overflow: scroll;
  overflow-y: hidden;
}
.gtevyoukam-unarketing-content ul li {
  width: 587px;
  height: 98px;
  border: 1px dashed #ef1616;
}
.gtevyoukam-unarketing-content ul li div {
  padding: 15px;
}


В основном использовании такого материала, то как можно заметить, что значительно экономится место на странице, где размещают тематический контент.

Демонстрация

zornet.ru

Анимированные вкладки на CSS3 и HTML5