Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

tabindex html

Всем привет! В данной небольшой статье будет рассмотрен атрибут tabindex который через клавишу tab позволяет выбирать ссылку и осуществлять по ней переход. Итак, поехали!

Допустим у нас есть две ссылки с атрибутом tabindex.

<a href="https://webfanat.com" target="_blank" tabindex="0"></a>

<a href="img/people.jpg" target="_blank" tabindex="0">
    <img src="img/people.jpg" >
</a>

Первая ссылка ведет на главную страницу моего блога, а вторая на картинку people.jpg.

У ссылок используется атрибут tabindex с одинаковым значением 0. Отмечу что данный атрибут можем принимать любое целочисленное значение больше или равное нулю. C отрицательными значениями данный атрибут работать не будет.

С помощью данного кода, нажимая клавишу tab мы можем выбирать ссылки в порядке возрастания и shift + tab в порядке убывания. То есть когда вы нажмете клавишу tab у вас в левом нижнем угле отобразиться первая ссылка с атрибутом tabindex(https://webfanat.com), если вы повторно нажмете tab отобразится вторая по порядку ссылка (img/people.jpg). И для того чтобы осуществить переход по выбранной ссылке достаточно будет нажать клавишу Enter.

Вот так в принципе это все работает. Скажу еще что с помощью значений атрибута tabindex вы можете задавать порядок переходов по ссылке. Пример:

<a href="https://webfanat.com" target="_blank" tabindex="2"></a>

<a href="img/people.jpg" target="_blank" tabindex="1">
    <img src="img/people.jpg" >
</a>

Если посмотреть данный код, то он работает не как мы ожидали. Первая ссылка которая выберется при нажатии клавиши tab все равно будет https://webfanat.com. Однако теперь чтобы перейти к ссылке img/people.jpg нам потребуется сделать шаг назад(shidt+tab) , потому что она имеет более приоритетный порядковый номер 1.

На этом данная статья подошла к концу. Если остались вопросы пишите их в комментариях или группе

вк

А я с вами прощаюсь. Желаю вам успехов и удачи! Пока.

Оцените статью

Еще статьи

let javascript

Методы идентификации подстрок в ES6

JavaScript мышь

Генерация строк php

Скриншоты python

meter html

tabindex html

zipfile python

Как установить go

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.