• 2624
  • 0
  • Автор: --------------
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css hmlt

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

Вкладки на странице можно сделать различными способами: применить JS, применить PHP, применить JS и PHP и сделать вкладку с сессиями, чтобы открытая вкладка отображалась и после перезахода на странице.
Но мы будем делать простой вид вкладки, на HTML и CSS, однако такой способ будет ненадежным и в некоторых старых браузерах эти вкладки отображаться не будут.

Код:
<div class="tabsLink">
<a href="#tab1">Вкладка 1</a>
<a href="#tab2">Вкладка 2</a>
</div>

<br>
<a class="tabs" id="tab1"></a>
<div class="tab">
Вкладка 1 <br>
</div>

<a class="tabs" id="tab2"></a>
<div class="tab">
Вкладка 2 <br>
</div>

Изначально нужно сделать, что бы вкладки были невидны, для этого используем свойство visibility:

Код:
.tabs {
opacity: 0; /* Прозрачность */
visibility: hidden; /* Изначально - спрятан */
}
Так же необходимо сделать и с классом tab:
Код:
.tab{
position:absolute; /* Абсолютное позиционирование */
visibility: hidden; /* Изначально - спрятан */
z-index: 10; /* z-index */
color:#478CFB; /* Цвет */
font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
}

Теперь необходимо сделать так, чтобы вкладки появились при клике. Для этого нам поможет псевдокласс :target, который как раз и работает с ссылками-якорями:

Код:
.tabs:target+.tab {
opacity: 1; /* Убирает прозрачность */
visibility: visible; /* Делает видимым */
}

Вот и все. Осталось лишь украсить сам вид вкладок, однако это не так важно и не повлияет на сам процесс:

Код:
.tabsLink a{
background-color:#478CFB; /* Цвет */
padding:5px; /* Внутренние отступы */
font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
color:#fff; /* Цвет */
text-decoration:none; /* Отсутствие нижней линии */

/* Округление старт */
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* Округление конец */
}

Вот весь код который можете опробывать в HTML редакторе для проверки скриптов и кодов ,он справа
Код:
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>

body {
background-color:white; /* Фон */
margin:0; /* Внешний отступ 0 */
padding:0; /* Внутренний отступ 0 */
text-align:center; /* Текст по центру (для IE) */
font:13pt "Trebuchet MS", tahoma, verdana, arial narrow, arial;
}
.main {
margin:0 auto; /* Внешних отступов 0, делаем элемент по центру */
width:800px; /* Обяхательно наличие ширины */
text-align:left; /* Текст по левому краю */
}

.tabs {
opacity: 0; /* Прозрачность */
visibility: hidden; /* Изначально - спрятан */
}
.tab{
position:absolute; /* Абсолютное позиционирование */
visibility: hidden; /* Изначально - спрятан */
z-index: 10; /* z-index */
color:#478CFB; /* Цвет */
font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
}

.tabs:target+.tab {
opacity: 1; /* Убирает прозрачность */
visibility: visible; /* Делает видимым */
}

.tabsLink a{
background-color:#478CFB; /* Цвет */
padding:5px; /* Внутренние отступы */
font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
color:#fff; /* Цвет */
text-decoration:none; /* Отсутствие нижней линии */

/* Округление старт */
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* Округление конец */
}

</style>

</head>
<body>
<div class="main">

<div class="tabsLink">
<a href="#tab1">Вкладка 1</a>
<a href="#tab2">Вкладка 2</a>
<a href="#tab3">Вкладка 3</a>
<a href="#tab4">Вкладка 4</a>
<a href="#tab5">Вкладка 5</a>
</div>



<a class="tabs" id="tab1"></a>
<div class="tab">
Вкладка BlueCode.ru 1

</div>

<a class="tabs" id="tab2"></a>
<div class="tab">
Новая вкладка BlueCode.ru 2

</div>

<a class="tabs" id="tab3"></a>
<div class="tab">
Еще одна вкладка BlueCode.ru, под номером 3

</div>

<a class="tabs" id="tab4"></a>
<div class="tab">
Это тоже вкладка BlueCode.ru 4

</div>

<a class="tabs" id="tab5"></a>
<div class="tab">
И еще одна вкладка BlueCode.ru под номером 5 :)

</div>

</body>
</html>

Можешь почитать и вот эту статейку "Шаблоны заполнения для форм"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element