Search the Community
Showing results for tags 'вкладки css'.
Found 1 result
-
Добрый день, помогите разобраться с отображением вкладок. Есть две вкладки: Вкладка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;}
