Как сделать вкладку активной в
Перейти к содержимому

Как сделать вкладку активной в

  • автор:

Вкладки на CSS

Вкладки представляют собой набор блоков, между которыми можно переключаться щелчком по «выступу» с заголовком блока (рис. 1).

Вид вкладок

Рис. 1. Вид вкладок

Для создания вкладок мы используем группу переключателей, поскольку они позволяют выбрать только один переключатель из группы. Все вкладки вставляем в с классом tabs , а для каждой вкладки используем набор из , и , которые вложены в с классом tab (пример 1).

Пример 1. Код отдельной вкладки

Элемент нужен для создания функционала вкладок, в стилях к нему позже добавим псевдокласс :checked . Элемент используется для заголовка каждой вкладки, его надо связать с с помощью атрибутов id и for . A хранит содержимое вкладки.

В CSS сперва прячем исходные переключатели с помощью свойства display со значением none .

input[type="radio"]

Чтобы вкладки располагались по горизонтали, добавим к классам tab и tab-title свойство display со значением inline-block .

.tab, .tab-title

Заголовок вкладок сделаем серого цвета с рамкой, активная вкладка будет белой. Стиль заголовка активной вкладки получаем за счёт комбинации селекторов :checked и tab-title . В стиле смещаем на один пиксель вниз, чтобы заголовок и содержимое вкладки образовывали единое пространство без линии снизу. И добавляем свойство z-index для отображения заголовка поверх содержимого вкладки.

.tab :checked + .tab-title < position: relative; /* Относительное позиционирование */ background: #fff; /* Цвет фона */ top: 1px; /* Сдвигаем вниз */ z-index: 1; /* Отображаем поверх содержимого */ >

Содержимое каждой вкладки прячем опять же через display . Нам также требуется явно задать ширину блока как 100%, так он будет занимать всю доступную ширину. Чтобы значение padding не влияло на ширину блока, можно воспользоваться свойством box-sizing или вычислить ширину через функцию calc().

.tab-content < padding: 10px; /* Поля вокруг текста */ width: 100%; /* Ширина */ box-sizing: border-box; /* Ширина не включает padding */ или padding: 10px; /* Поля вокруг текста */ width: calc(100% - 20px); /* Ширина содержимого */ >

Стиль содержимого активной вкладки задаём через довольно громоздкий селектор.

.tab :checked + .tab-title + .tab-content

Впрочем, его можно заменить на более изящный и компактный с помощью братского селектора.

.tab :checked ~ .tab-content

Окончательный код для создания вкладок с использованием псевдокласса :checked показан в примере 2.

Пример 2. Вкладки на CSS

См. также

  • box-sizing
  • height
  • width
  • Аккордеон меню
  • Выпадающее меню
  • Использование :checked
  • Открываем блочную модель
  • Подсказка в поле формы
  • Пользовательские формы
  • Псевдокласс :checked
  • Размеры блока
  • Спойлер
  • Стилизация переключателей
  • Стилизация флажков
  • Строчно-блочные элементы
  • Формы в Bootstrap 4
  • Формы в HTML
  • Элемент label

Как сделать вкладку активной в

пробовал так
ЭтаФорма.Элементы.ВидыОплаты.

дальше ничего подходящего не нашел, можно ли сделать сабж ?

ВидыОплаты — это группа — страница
наверное присвоить ТекущаяСтраница

(1) ЭлементыФормы.ВидыОплаты.ТекущаяСтраница = ЭлементыФормы.ВидыОплаты.Страницы.ТвояСтраницаБлаБлаБла;

а блаблабла зачем?
(4) для красоты
(3) Переменная не определена (ЭлементыФормы)
(3) а теперь для УФ повтори )
(6) на сервере делаешь?
(7) для УФ не повторю, ибо не знаю 🙁

(9) да, но это не имеет значение ибо

Доступность:
Тонкий клиент, веб-клиент, сервер, толстый клиент

(11) а вот теперь признавайся — управляемый интерфейс?
(13) эх, и долго же делал )

группаЗакладок = Элементы.Найти(«ГруппаЗакладокБлаБлаБла»);
группаЗакладок.ТекущаяСтраница = группаЗакладок.ПодчиненныеЭлементы.Найти(«НужнаяСтраницаБла»)

Сделать кладку включенной по умолчанию

Есть скрипт вкладок (tabs). Можно ли сделать активной первую вкладку по умолчанию без изменений в html коде?

function openCity(evt, cityName) < var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) < tabcontent[i].style.display = "none"; >tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) < tablinks[i].className = tablinks[i].className.replace(" active", ""); >document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; >
/* Style the tab */ .tab < overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; >/* Style the buttons inside the tab */ .tab button < background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; >/* Change background color of buttons on hover */ .tab button:hover < background-color: #ddd; >/* Create an active/current tablink class */ .tab button.active < background-color: #ccc; >/* Style the tab content */ .tabcontent < display: none; padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; >/* Fade in tabs */ @-webkit-keyframes fadeEffect < from < opacity: 0; >to < opacity: 1; >> @keyframes fadeEffect < from < opacity: 0; >to < opacity: 1; >>
 

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Отслеживать

задан 10 июн 2021 в 19:03

Анна Матвеева Анна Матвеева

671 4 4 серебряных знака 14 14 бронзовых знаков

Да, конечно можно. Добавь элементу класс active (и желательно через classList , а не className ).

10 июн 2021 в 19:04

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Нужно просто программно кликнуть по нужной вкладке. В примере ниже кликается по самой первой. Но можно поставить любую с помощью необходимого CSS селектора

function openCity(evt, cityName) < var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) < tabcontent[i].style.display = "none"; >tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) < tablinks[i].className = tablinks[i].className.replace(" active", ""); >document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; > document.addEventListener("DOMContentLoaded", function(event) < document.querySelector('.tablinks:first-child').click(); >);
/* Style the tab */ .tab < overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; >/* Style the buttons inside the tab */ .tab button < background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; >/* Change background color of buttons on hover */ .tab button:hover < background-color: #ddd; >/* Create an active/current tablink class */ .tab button.active < background-color: #ccc; >/* Style the tab content */ .tabcontent < display: none; padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; >/* Fade in tabs */ @-webkit-keyframes fadeEffect < from < opacity: 0; >to < opacity: 1; >> @keyframes fadeEffect < from < opacity: 0; >to < opacity: 1; >>
 

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Как сделать чтобы активной была та вкладка (таб), на которую нажали перед обновлением страницы?

При нажатии на ссылку страница обновляется, открывается то что мне надо, НО сразу же 1 вкладка становится активной. Как сделать чтобы активной была та вкладка, на которую нажали или посоветуйте другой пример.

  • Вопрос задан более трёх лет назад
  • 629 просмотров

3 комментария

Простой 3 комментария

daemonhk

Открывайте страницу по хэшу (#tab-1), затем в коде проверяйте текущий хэш, если есть, и открывайте нужный таб.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *