Делаем блок с вкладками работающий на CSS3
Код блока предельно лёгкий и не будет нагружать загрузку страницы.Работает без применения скриптов и может быть применён под любые цели.Вы можете установить его в любом месте даже в материале.Для установки достаточно скопировать весь код по месту установки предварительно произведя требуемые названия вкладок и содержимое контента.В HTML редакторе нельзя проверить код блока,потому что переход по вкладкам присходит действиями свойств.
Код
<style>
#tab1, #tab2, #tab3 {
display:none;
position:fixed;
}
.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1) {
background: #fff;
padding: 5px;
border: 1px solid #e1e1e1;
line-height: 28px; }
.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3) {
border-bottom: #fff;
}
.menu1 > a:hover {
text-decoration: none;
}
.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1) {
display: none;
padding: 5px;
border: 1px solid #e1e1e1;
border-top: #fff;
background: #fff;
}
.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3) {
display: block;
}
</style>
<div class="menu1">
<br id="tab2"/><br id="tab3"/>
<a href="#tab1">Заголовок вкладки1</a>
<a href="#tab2">Заголовок вкладки2</a>
<a href="#tab3">Заголовок вкладки3</a>
<div>вклака 1</div>
<div>вклака 2</div>
<div>вклака 3</div>
</div>
#tab1, #tab2, #tab3 {
display:none;
position:fixed;
}
.menu1 > a,
.menu1 #tab2:target ~ a:nth-of-type(1),
.menu1 #tab3:target ~ a:nth-of-type(1) {
background: #fff;
padding: 5px;
border: 1px solid #e1e1e1;
line-height: 28px; }
.menu1 > a:nth-of-type(1),
.menu1 #tab2:target ~ a:nth-of-type(2),
.menu1 #tab3:target ~ a:nth-of-type(3) {
border-bottom: #fff;
}
.menu1 > a:hover {
text-decoration: none;
}
.menu1 > div,
.menu1 #tab2:target ~ div:nth-of-type(1),
.menu1 #tab3:target ~ div:nth-of-type(1) {
display: none;
padding: 5px;
border: 1px solid #e1e1e1;
border-top: #fff;
background: #fff;
}
.menu1 > div:nth-of-type(1),
.menu1 #tab2:target ~ div:nth-of-type(2),
.menu1 #tab3:target ~ div:nth-of-type(3) {
display: block;
}
</style>
<div class="menu1">
<br id="tab2"/><br id="tab3"/>
<a href="#tab1">Заголовок вкладки1</a>
<a href="#tab2">Заголовок вкладки2</a>
<a href="#tab3">Заголовок вкладки3</a>
<div>вклака 1</div>
<div>вклака 2</div>
<div>вклака 3</div>
</div>
Смотрите также:
Спидомет
Я его раньше видел и замучился искать так как он мне понравился ну когда я его скачал то там был баг пришлось убирать его и теперь нормально
Минимальная длина комментария - 50 знаков. комментарии модерируются