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

varfj54j · February 3, 2014

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

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>

CSS-файл:

/*.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;}

Sign In

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

Question

varfj54j

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Обсуждения

Forums

Important Information