Вход | Регистрация | FAQ
Anonymous

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

+ Ответить

Сообщений: 2 Страница 1 из 1


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

varfj54j » Пн фев 03, 2014 8:46 am

Добрый день, помогите разобраться с отображением вкладок. Есть две вкладки: Вкладка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>

Файл style.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;
}
Аватара пользователя

varfj54j

  • Сообщения: 1
  • Зарегистрирован: Пн фев 03, 2014 8:44 am

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

XainPro » Ср фев 05, 2014 8:19 pm

попробуйте эти простые вкладки CSS

http://css-tricks.com/examples/CSSTabs/
Аватара пользователя

XainPro

  • Сообщения: 3933
  • Зарегистрирован: Пт фев 17, 2012 8:10 pm


+ Ответить

Страница 1 из 1