Управление вкладками через CSS - HTML и CSS

var_fj54j · 03.02.2014, 12:42

Добрый день, помогите разобраться с отображением вкладок. Есть две вкладки: Вкладка1 и Вкладка2. В вкладках содержится информация. В вкладке2 есть еще две вкладки: Вкладка3 и Вкладка4. На данный момент стиль настроен так, что отображается информация вкладок 2, 3, 4 на Вкладке1, а не должна. Ниже html и css код.

html-файл:

Код HTML:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<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="tabs3" id="tab2"></a>
	<div class="tab3">Вкладка 2 <br /> Текст <br />
	<div class="tabsLink">
		<a href="#tab2_1">Вкладка 2_1</a>
		<a href="#tab2_2">Вкладка 2_2</a>
	</div>
<br />
<a class="tabs1" id="tab2_1"></a>
	<div class="tab1">Вкладка 2_1 <br /> Информация для вкладки 2_1</div>
<a class="tabs1" id="tab2_2"></a>
	<div class="tab1">Вкладка 2_2 <br /> Информация для вкладки 2_2</div>
	</div>
</body>
</html>

Файл style.css:

Код HTML:

/*.tabs, .tabs3 {*/
.tabs, tabs3, .tabs1{
    opacity: 0;  /* Прозрачность */
    visibility: hidden; /* Изначально - спрятан */
}

/*.tab, .tab3{*/
.tab, .tab3, .tab1{
    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;
	color:#000000;
}

/*.tabs1 {
    opacity: 0;  /* Прозрачность 
    visibility: hidden; /* Изначально - спрятан 
}*/

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

.tabs3:target+.tab3 {
	opacity: 1; /* Убирает прозрачность */
    visibility: visible;
	color:#000000;
}

.tabs1:target + .tab1, .tab3{
	opacity: 1; /* Убирает прозрачность */
    visibility: visible;
	color:#000000;
}

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
управление через Socket	Plumazh	Работа с сетью в Delphi	9	10.09.2013 14:39
Управление вкладками браузера	Aleskandr	JavaScript, Ajax	0	28.01.2013 10:39
Управление вкладками WebBrowser	Manson_0	C# (си шарп)	1	28.06.2012 00:40
Управление псевдоэлементами css средствами javascript	Naive	JavaScript, Ajax	5	01.03.2012 15:27
Управление через лан	yura-cat	Помощь студентам	7	23.09.2008 00:26