Добавить отзыв положительные 0
отрицательные 0
нейтральные 3 ![]() ![]() ![]() ![]() ![]() |
© домашние скрипты |
<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>
В результате использования вот такого нехитрого кода можно значительно сэкономить место на страничках сайта и систематизировать размещение контента.