Вторник, 03 Декабря 2024, 21:34

Приветствую Вас Гость

[ Новые сообщения · Игроделы · Правила · Поиск ]
  • Страница 1 из 1
  • 1
Адаптивные вкладки
Snake174Дата: Вторник, 20 Января 2015, 13:53 | Сообщение # 1
участник
Сейчас нет на сайте
Всем привет. Пытаюсь дсделать адаптивные вкладки.
Есть HTML:
Код

<div class="tabs">
   <input id="tab1" type="radio" name="tabs" checked>
   <label for="tab1" title="Title1">Title1</label>

   <input id="tab2" type="radio" name="tabs">
   <label for="tab2" title="Title2">Title2</label>

   <section id="content1">
     ...
   </section>

   <section id="content2">
     ...
   </section>
</div>


И CSS:
Код

section {
   display: none;
   padding: 15px;
   background: #fff;
   border: 1px solid #ddd;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
   display: block;
}


Можно ли как-нибудь изменить этот кусок кода, чтобы не прописывать для каждой вкладки?
Код

#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
   display: block;
}

Что-то типа:
Код

#tab*:checked ~ #content* {
   display: block;
}


Или всё таки придётся их вручную все прописывать? Спасибо.


Не следует обманывать инспектора
Pipmak Assistant
Love2D Exporter
Love2D-Helpers
Old Consoles Games
_ToBe_Дата: Вторник, 20 Января 2015, 14:01 | Сообщение # 2
постоянный участник
Сейчас нет на сайте
Я представляю себе 2 способа
1. Добавить всем табам ещё один класс/id и в нём прописать те свойства, которые будут повторяться


2. Использовать LESS
Snake174Дата: Вторник, 20 Января 2015, 14:13 | Сообщение # 3
участник
Сейчас нет на сайте
Цитата
Добавить всем табам ещё один класс/id и в нём прописать те свойства, которые будут повторяться

Это то понятно. Немного не то нужно. Надо как-то ~ ещё задействовать.

Цитата
Использовать LESS

Нет возможности.

Наверно, придётся все вкладки прописывать. Спасибо за ответ.


Не следует обманывать инспектора
Pipmak Assistant
Love2D Exporter
Love2D-Helpers
Old Consoles Games
JackNazaryanДата: Среда, 22 Апреля 2015, 18:00 | Сообщение # 4
старожил
Сейчас нет на сайте
Может поздно, но...

Можно ещё на javascript легко реализовать, при чём необязательно прописывать для всех отдельно.

Сам делаю так:

Код
function HideById(id) {
    document.getElementById(id).style.display = "none";
}

function ShowById(id) {
    document.getElementById(id).style.display = "block";
}

function SwitchShow(id) {
   if(document.getElementById(id).style.display == "none") {
    ShowById(id);
   }
   else {
    HideById(id);
   }
}

function ChangeTab(id) {
    var list = document.getElementsByClassName("tab");
    for (var i = 0; i < list.length; i++) {
     list[i].style.display = "none";
    }
    document.getElementById(id).style.display = "block";
}


Теперь при вызове ChangeTab будет показываться вкладка (по ID) и скрываться остальные (по классу "tab"). Единственное, что надо сделать самому - привязку к ссылке, но вряд ли это большая проблема.
  • Страница 1 из 1
  • 1
Поиск:

Все права сохранены. GcUp.ru © 2008-2024 Рейтинг