Создание вкладок при помощи HTML и CSS
В данной теме мы рассмотрим простой скрипт создания вкладок при помощи HTML и CSS.
Вкладки, как правило, используются для экономии места при размещении большого количества информации на одной страничке.
При использовании вкладок посетитель может просмотреть без перезагрузки странички интересующую его информацию, просто кликнув по заголовку нужной вкладки.
Наш скрипт является легким и быстрым т.к. не использует JavaScript код или какие-либо плагины и библиотеки.
Ниже Вы можете наблюдать пример создаваемых данным скриптом вкладок:
Произвольное содержимое...
Произвольное содержимое...
Произвольное содержимое...
Вторая вкладка
Размеры содержимого вкладок
могут отличаться по высоте!
Как видно из примера, содержимое каждой вкладки может быть различным по высоте, чего частенько не встретишь в других подобных скриптах (у них все вкладки одинаковые по высоте). Количество вкладок и их оформление также можно легко изменить.
При создании вкладок 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> добавьте следующие стили оформления:
<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>В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
А я-то раньше думал, что подобное только с помощью jQuery UI можно сделать, а там кода всякого "выше крыши". Оказывается - нет! Можно, и как Вы показали.
Спасибо за науку!
С уважением, Коротеев Владимир.
Уважение таким профессионалам, как этот автор.
#tab_1:checked ~ #txt_1 и т.д. - как-то более универсально описать эти div?
Спасибо большое за материал.
Подскажите, пожалуйста, можно ли на css сделать автоматический перенос не помещающихся в одну строку вкладок на вторую строку при уменьшении ширины браузера.
Подскажите, как изменить размер шрифта в тексте и в названии вкладки, и желательно конечно же шрифт тоже изменить?
В класс tabs добавьте text-align: center;, а в класс .tabs>div добавьте text-align: left;
<input type="radio" name="inset" value="" id="tab_5">
<label for="tab_5">Вкладка №5</label>
<div id="txt_5">5555555555</div>
И не забываем о CSS: #tab_5:checked ~ #txt_5 { display: block; }
<div id="txt_2">
<h3>Формат</h3>
<input type="submit" name="baddFormat" id="id_addFormat" value="Add"/>
<p>Добавить новый формат.</p>
</div>,
поле нажатия на нее, переходит на первую вкладку? Как это победить?
Скажите пожалуйста, как сделать так, чтобы при обновлении страницы оставаться на открытой вкладке?
<div class="tabs">
<input type="radio" name="inset" value="" id="tab_1" >
<label for="tab_1">Вкладка №1</label>
<input type="radio" name="inset" value="" id="tab_2" checked>
<label for="tab_2" >Вкладка №2</label>
<input type="radio" name="inset" value="" id="tab_3">
<label for="tab_3">Вкладка №3</label>
(в этом случае 2 вкладка будет открыта первой при загрузке страницы! Удачи.
Подскажите пожалуйста, как сделать, чтобы вкладки были разных цветов?