Делаем блок с вкладками работающий на CSS3

Делаем блок с вкладками работающий на 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>
Если авторизоваться на этом сайте, то рекламы будет меньше!



Поделись с друзьями

Комментариев: 0

Ошибка!

Уведомление!
Добавлять комментарии могут только зарегистрированные пользователи. Пройдите процесс регистрации, либо авторизуйтесь на сайте под своим логином.