Tab css: Табы (вкладки) для сайта на CSS и JavaScript – 3 способа

Содержание

Свойство tab-size | CSS справочник

CSS свойства

Определение и применение

CSS свойство tab-size изменяет ширину отступа, заданного с помощью символа табуляции (Tab, Юникод — U+0009).

Обращаю Ваше внимание, что в HTML символ табуляции обычно отображается как один символ пробела, за исключением некоторых элементов, таких как <textarea> и <pre>, как следствие, эффект от применения свойства tab-size будет виден только для этих элементов.

Поддержка браузерами

Internet Explorer и Edge не поддерживают свойство tab-size.
Все браузеры, за исключением Chrome(с версии 42.0) не поддерживают значения длины(единицы измерения расстояния в CSS), только integer (целые числа).

CSS синтаксис:

tab-size:"number | length | initial | inherit";

JavaScript синтаксис:

object.style.tabSize = "8"

Значения свойства

Значение	Описание
number	Указывает количество символов пробела, которые должны быть отображены для каждого символа табуляции (Tab, Юникод — U+0009). Отрицательные значения не допускаются. Значение по умолчанию 8.
length	Задает длину символа табуляции в единицах измерения расстояния, используемых в CSS. Отрицательные значения не допускаются. В настоящее время поддерживается только браузером Chrome(с версии 42.0).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Да.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>>Изменение ширины отступа, заданного табуляцией в CSS</title>
<style> 
 div {
border : 1px solid blue; /* задаём сплошную границу шириной 1px синего цвета */
background : azure; /* задаём цвет заднего фона  */
}
.test {
-moz-tab-size:8; /* для поддержки Firefox */
tab-size:8; /* указываем количество символов пробела, которые должны быть отображены для каждого символа табуляции (по умолчанию) */
}
. test2 {
-moz-tab-size:12; /* для поддержки Firefox */
tab-size:12; /* указываем количество символов пробела, которые должны быть отображены для каждого символа табуляции */
}
 .test3 {
-moz-tab-size:16; /* для поддержки Firefox */
tab-size:16; /* указываем количество символов пробела, которые должны быть отображены для каждого символа табуляции */
}
.test4 {
-moz-tab-size:7em; /* на будущее */
tab-size:7em; /* задаем длину символа табуляции в единицах измерения расстояния, используемых в CSS (поддержка только в Chrome с версии 42.0) */
}
.test5 {
-moz-tab-size:40px; /* на будущее */
tab-size:40px; /* задаем длину символа табуляции в единицах измерения расстояния, используемых в CSS (поддержка только в Chrome с версии 42.0) */
}
</style>
</head>
	<body>
		<pre>
			<div class = "test">Табы для примера располагаются между слов</div>
			<div class = "test2">Табы для примера располагаются между слов</div>
			<div class = "test3">Табы для примера располагаются между слов</div>
			<div class = "test4">Табы для примера располагаются между слов</div>
			<div class = "test5">Табы для примера располагаются между слов</div>
		</pre>
	</body>
</html>

Пример использования свойства tab-size(изменение ширины отступа, заданного табуляцией в CSS).

CSS свойства

CSS свойство tab-size

Свойство tab-size устанавливает ширину символов табуляции.

Свойство tab-size может быть видимым только для HTML тегов <textarea> и <pre>.

Отрицательные значения недопустимы.

Для максимальной совместимости браузера вместе с этим свойством могут быть использованы расширения (-moz- для Firefox и -o- для Opera).

Значение по умолчанию	8
Применяется	Ко всем элементам. К блочным контейнерам.
Наследуется	Да
Анимируемое	Нет
Версия	CSS3
DOM Syntax	object.style.tabSize = «20»;

Синтаксис¶

tab-size: number | length | initial | inherit;

Пример¶

 <!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      . tab1 {
      -moz-tab-size: 5; /* Firefox */
      -o-tab-size: 5; /* Opera 10.6-12.1 */
      tab-size: 5;
      }
      .tab2 {
      -moz-tab-size: 20; /* Firefox */
      -o-tab-size: 20; /* Opera 10.6-12.1 */
      tab-size: 20;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства tab-size</h3>
    <pre>
Lorem	ipsum	is	a...  
</pre>
    <pre>
Lorem	ipsum	is	a...
</pre>
  </body>
</html>

Попробуйте сами!

В данном примере значение первого элемента равно 5, а значение второго элемента — 20.

Значения¶

Значение	Описание
number	Устанавливает количество знаков пробела в табуляции. Отрицательные значения недопустимы. Значение по умолчанию — 8.
length	Устанавливает ширину табуляции. Отрицательные значения недопустимы. Большинство браузеров не поддерживают это значение.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.

Поддержка браузера


42.0+	x	53.0 -webkit-	x	29.0+

Как использовать CSS и jQuery для скрытия и отображения содержимого вкладки

  
    How to use CSS and jQuery to hide and show tab content li > a {
              display: block;
            }

            .nav-tabs{
              *zoom: 1;
            }

            .nav-tabs:before,
            .nav-tabs:after {
              display: table;
              content: "";
            }

            .nav-tabs:after {
              clear: both;
            }

            .nav-tabs > li {
              float: left;
            }

            .  nav-tabs > li > a {
              padding-right: 12px;
              padding-left: 12px;
              margin-right: 2px;
              line-height: 14px;
            }

            .nav-tabs {
              border-bottom: 1px solid #ddd;
            }

            .nav-tabs > li {
              margin-bottom: -1px;
            }

            .nav-tabs > li > a {
              padding-top: 8px;
              padding-bottom: 8px;
              line-height: 18px;
              border: 1px solid transparent;
              -webkit-border-radius: 4px 4px 0 0;
                 -moz-border-radius: 4px 4px 0 0;
                      border-radius: 4px 4px 0 0;
            }

            .nav-tabs >  li > a:hover {
              border-color: #eeeeee #eeeeee #dddddd;
            }

            .nav-tabs > .active > a,
            .nav-tabs > .active > a:hover {
              color: #555555;
              cursor: default;
              background-color: #ffffff;
              border: 1px solid #ddd;
              border-bottom-color: transparent;
            }

            li {
              line-height: 18px;
            }

            . tab-content.active{
                display: block;
            }

            .tab-content.hide{
                display: none;
            }


            /** End: to style navigation tab **/
        ]]> 
        
                Content in tab 1
            
        
                Content in tab 2
            
        
                Content in tab 3

Создание вкладок с использованием только CSS3

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

Предупреждение: Цель этого урока — показать возможности CSS3. Это решение может быть или не быть полезным в реальной жизни.

Демонстрация работы – Скачать исходный код

Создание вкладок с использованием только CSS3

HTML:

<ul>
        <li>
          <input type="radio" checked name="tabs">
          <label for="tab1">tab 1</label>
          <div>
    . ..
          </div>
        </li>
        <li>
          <input type="radio" name="tabs">
          <label for="tab2">tab 2</label>
          <div>
            ...
          </div>
        </li>
        <li>
          <input type="radio" name="tabs">
          <label for="tab3">tab 3</label>
          <div>
            ...
          </div>
        </li>
</ul>

CSS:

body, html {
          height: 100%;
          margin: 0;
          -webkit-font-smoothing: antialiased;
          font-weight: 100;
          background: #aadfeb;
          text-align: center;
          font-family: helvetica;
      }

      .tabs input[type=radio] {
          position: absolute;
          top: -9999px;
          left: -9999px;
      }
      .tabs {
        width: 650px;
        float: none;
        list-style: none;
        position: relative;
        padding: 0;
        margin: 75px auto;
      }
      .  =tab-content] {
          display: block;
      }
      .tab-content{
        z-index: 2;
        display: none;
        text-align: left;
        width: 100%;
        font-size: 20px;
        line-height: 140%;
        padding-top: 10px;
        background: #08C;
        padding: 15px;
        color: white;
        position: absolute;
        top: 53px;
        left: 0;
        box-sizing: border-box;
        -webkit-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        animation-duration: 0.5s;
      }

Для начала, чтобы повторить функциональность JavaScript, нужно найти способ дать знать CSS, что пользователь нажал на кнопку. Если использовать JavaScript, можно просто добавить еще одно название класса при нажатии, но так как тут не будет использоваться JavaScript, нужно найти обходной путь. Мы воспользовались скрытыми радиокнопками, связанными с тегом подписи с помощью атрибута rel. Подпись сработает как кнопка, и когда она нажимается, она включит атрибут отмеченности на связанной с ней радиокнопке. Теперь можно задавать стили с помощью селектора отмечено.

Из кода HTML видно, что радиокнопка, подпись и блок с содержимым находятся на одном уровне. Для этого есть причина. С помощью отличного родственного селектора CSS ~ можно добиться того, чтобы один селектор включал другой селектор того же уровня даже не вкладывая их друг в друга. Это позволяет любой отмеченной радиокнопке запустить появление любого блока содержимого, таким образом повторяется поведение обычной вкладки, созданной с помощью JavaScript.

В примере также присутствует библиотека анимаций CSS, созданная Dan Eden, чтобы добавить эффекты анимации при появлении содержимого вкладок.

Демонстрация работы – Скачать исходный код

Заключение

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

Автор урока Pete R.

Перевод — Дежурка

Смотрите также:

Tabs скрытие и открытие тегов? :: DLE FAQ

Добрый вечер!
вообщем (у меня по русскому языку двойка, я не знаю, что в русском языке не существует слова вообщем) код работает как нужно, но не хватает одного.

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


<div>
 <input type="radio" name="tabs">
 <label for="tab1">Вкладка 1</label>
  
 <input type="radio" name="tabs"> 
 <label for="tab2">Вкладка 2</label>
  
 <section>
    <p>Здесь размещаете любое содержание.1...</p>
 </section>
 <section>
    <p>Здесь размещаете любое содержание.2...</p>
 </section>
 </div>

/* Базовый контейнер табов */
.tabs {
min-width: 320px;
max-width: 800px;
padding: 0px;
margin: 0 auto;
}
/* Стили секций с содержанием */
.tabs>section {
display: none;
padding: 15px;
background: #fff;
border: 1px solid #ddd;
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1. 5;
color: #383838;
/* прикрутим анимацию */
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
/* Описываем анимацию свойства opacity */

@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Прячем чекбоксы */
.tabs>input {
display: none;
position: absolute;
}

/* Стили переключателей вкладок (табов) */
.tabs>label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #aaa;
border: 0px solid #ddd;
border-width: 1px 1px 1px 1px;
background: #f1f1f1;
border-radius: 3px 3px 0 0;
}
/* Шрифт-иконки от Font Awesome в формате Unicode */
.tabs>label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}

/* Изменения стиля переключателей вкладок при наведении */

. tabs>label:hover {
color: #888;
cursor: pointer;
}
/* Стили для активной вкладки */
.tabs>input:checked+label {
color: #555;
border-top: 1px solid #009933;
border-bottom: 1px solid #fff;
background: #fff;
}

/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, {
display: block;
}
/* Убираем текст с переключателей
* и оставляем иконки на малых экранах
*/

@media screen and (max-width: 680px) {
.tabs>label {
font-size: 0;
}
.tabs>label:before {
margin: 0;
font-size: 18px;
}
}
/* Изменяем внутренние отступы
* переключателей для малых экранов
*/
@media screen and (max-width: 400px) {
.tabs>label {
padding: 15px;
}
}

W3.CSS Пагинация

Базовая разбивка на страницы

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

Для создания базовой разбивки на страницы используйте кнопки ( w3-button ) в бар ( w3-bar ).

Пример

1
2
3
4
5

Попробуй сам »

Чтобы убрать пробел между кнопками, добавьте w3-bar-item класс:

Пример

& laquo;
1
2
3
4
5
& raquo;

Попробуй сам »

Стрелки для разбивки на страницы

Используйте объекты HTML или значки из библиотеки значков для добавления стрелок нумерации страниц:

Пример

& laquo;
1
2
3
4
5
& raquo;

Попробуй сам »

Активное / текущее звено

Используйте один из классов w3- color , чтобы указать, на какой странице находится пользователь:

Пример

& laquo;
1
2
3
4
& raquo;

Попробуй сам »

Цвет при наведении

По умолчанию, когда вы наводите курсор мыши на ссылки пагинации, они приобретают серый цвет фона. Используйте любой из классов w3-hover- color , чтобы изменить цвет наведения:

Пример

& laquo;
1
2
3
4
& raquo;

Попробуй сам »

Размер страницы

Используйте w3-tiny , w3-small , w3-large , w3-xlarge , w3-xxlarge или w3-xxxlarge для размера страницы:

Центрированная разбивка на страницы

Чтобы центрировать разбиение на страницы, поместите элемент «w3-bar» внутри элемента «w3-center»:

Пример

& laquo;
1
2
3
4
& raquo;

Попробуй сам »

Пагинация с границами

Добавьте класс w3-border для создания разбивки на страницы с границами:

Закругленные границы

Добавьте класс w3-round рядом с w3-border для закругленных границ:

Другие примеры разбивки на страницы

Класс w3-bar также может использоваться для создания кнопок «следующий / предыдущий»:

Следующая / предыдущая Пример

& # 10094; Назад
Далее & # 10095;

Попробуй сам »

Пример встроенного меню

Главная страница
Ссылка 1
Ссылка 2
Ссылка 3

Попробуй сам »

12 вкладок CSS

Коллекция бесплатных вкладок HTML и CSS. Обновление майской коллекции 2018 г.