Bootstrap-5 При использовании "таблеток/pills" не работают ссылки <a> / HTML, JavaScript, VBScript, CSS

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Bootstrap-5 При использовании "таблеток/pills" не работают ссылки <a>

2 сообщений из 2, страница 1 из 1

Bootstrap-5 При использовании "таблеток/pills" не работают ссылки <a>

#40129148

ValGer

Участник

Откуда: Псков

Сообщения: 511

Рейтинг: 0 / 0

Вот простейший пример из документации (https://www.w3schools.com/bootstrap5/bootstrap_navs.php)

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

<!-- Nav pills -->
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" data-bs-toggle="pill" href="https://yandex.ru">Яндекс</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" data-bs-toggle="pill" href="https://mail.ru">Почта</a>
  </li>
...................................................................................................

</ul>

Как только ставлю атрибут data-bs-toggle="pill" ссылки перестают работать. Без него всё работает, но отсутствует цветовое выделение выбранного пункта меню. Что бы это значило и как помочь?

...

Рейтинг:

0 / 0

24.01.2022, 18:41

| Ответить | Цитировать | Написать

Bootstrap-5 При использовании "таблеток/pills" не работают ссылки <a>

#40129507

ValGer

Участник

Откуда: Псков

Сообщения: 511

Рейтинг: 0 / 0

ValGer,
Проблема, конечно решается с использование псевдокласса :hover:
...................................................................................................

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

 <style type="text/css">
    a:hover {
      background-color: blue !important;
      color: white !important;
    }
  </style>
</head>
...................................................................................................
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link" active href="https://yandex.ru">Яндекс</a>
      </li>
      <li class="nav-item">
        <a class="nav-link "href="https://mail.ru">Почта</a>
      </li>
    </ul>
...................................................................................................

но при этом исчезают всякие "красивости" вроде закруглённых углов, плавных переходов и тд. При желании можно дополнить наш класс для <a> в стилевой таблице. Понятно, что класс nav-pills и атрибут якорного элемента data-bs-toggle="pill" необходимо убрать.

...

Рейтинг:

0 / 0

26.01.2022, 10:56

| Ответить | Цитировать | Написать

2 сообщений из 2, страница 1 из 1

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?desktop=1&fid=22&tid=1443132]:	0ms
get settings:	20ms
get forum list:	13ms
check forum access:	3ms
check topic access:	3ms
track hit:	43ms
get topic data:	9ms
get forum data:	2ms
get page messages:	83ms
get tp. blocked users:	2ms
others:	15ms

total:	193ms