1. Главная
  2. Блог
  3. Полезные статьи
  4. Якорные ссылки на спойлеры и табы

Якорные ссылки на спойлеры и табы

Создание якорных ссылок процесс не сложный. Главное чтобы у нужного блока был указан id, далее через символ # указываем тот самый id и получаем якорную ссылку. Нужно иметь в виду, что если мы создаем якорную ссылку на блок с той же страницы где размещена ссылка, то, нам достаточно указать ссылку вида #id, а если ссылка (например, ссылка в меню) ведет на блок, размещенный на другой странице, то ее вид должен быть: https://название-сайта/страница/#id

Если якорная ссылка ведет на спойлер или таб, то спойлер не откроется. Для этого нужна имитация клика по спойлеру.

ссылки на табы и спойлеры с прокруткой

Долго искали решение в интернете. В основном всё сводится к смене класса у таба на activ с помощью JS или jQuery, но в нашем случае к табу и описанию в табе применялось несколько классов и рабочим решением в итоге оказалось это https://telegra.ph/Pri-perehode-po-yakornoj-ssylke-imitirovat-nazhatie-knopki-03-31

Этот скрипт "имитирует" нажатие таба или спойлера если зафиксировано нажатие на якорную ссылку и на странице существует "кнопка" с таким id. От себя добавили три последние строки, чтобы кроме "клика по табу" осуществлялась прокрутка к табу на уровне середины экрана. block: 'center' можно поменять на block: 'start'

<script>
// Get all anchor links on the page
const anchors = document.querySelectorAll('a[href^="#"]');

// Add event listener for each anchor link
anchors.forEach(function (anchor) {
    anchor.addEventListener('click', function (e) {
        e.preventDefault(); // Prevent default behavior of the link
        
        // Get the id of the button to which the anchor link is related
        const targetId = this.getAttribute('href');

        // Find the target button by its id
        const targetButton = document.querySelector(targetId);

        // If the button is found, click it
        if (targetButton) {
            targetButton.click();
targetButton.scrollIntoView({
      behavior: 'smooth',
      block: 'center',
    });
        }

    });
});
</script>

Заметим, что данный код работает для текущей страницы с якорями. Более сложная задача с переходами по якорям табов на другие страницы рассматривается в этой статье.

Кроме создания сайтов мы осуществляем их техническую техподдержку ознакомится с условиями.
Комментарии
Name
Email
Phone
Ваше имя
Ваш email
Оставить комментарий
Нажмите для звонка
Хотите заказать сайт?
Обращайтесь любым удобным способом и мы поможем подобрать интересный вариант для Вас!