Хаки и Скрипты Next Generation CMS : CSS, html : HTML вкладки

irbees2008 Опубликовано - 5 - июня CSS

Автор: --------------
Адаптировал: 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>

Можешь почитать и вот эту статейку "Пять вещей, которые надо знать об HTML5"

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

22.03.13HTML теги address
20.03.13HTML тег area
05.06.13Вертикальные линии
26.08.13Fresh HTML редактор кода
09.10.14Анимация контента в табах на CSS3

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