5242
- 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{
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>
Можешь почитать и вот эту статейку "Редиректим на новый домен"
Это тоже интересно
22.03.13HTML теги address- 20.03.13HTML тег area
05.06.13Вертикальные линии
26.08.13Fresh HTML редактор кода
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.