Задача. На страницах есть блок с табами (вкладками) и необходимо сделать так, чтобы после загрузки страницы активировался определенный таб (вкладка). Например, на странице товаров есть 3 вкладки «Холодильники», «Телевизоры», «Велосипеды» и каждая содержит какой-то перечень соответствующих товаров. И нужно сделать так, чтобы находясь на странице товара, например, относящемуся к телевизорам, при загрузке страницы автоматически в блоке с табами открывалась вкладка «Телевизоры».
Решение 1. Данную задачу можно решить на JavaScript используя события по клику. Т.е. нужно сымитировать клик по нужному табу, чтобы переключить на соответствующую вкладку. Но тут нужно к чему-то привязаться, чтобы код понимал на какую вкладку переключать. Здесь можно использовать «хлебные крошки». Например, есть 3 категории «Холодильники», «Телевизоры» и т.д. И есть блок с вкладками, который выводится в дочерних страницах этих категорий. В свою очередь, вкладки соответствуют категориям. Таким образом, JS-код будет брать данные из «хлебных крошек» и делать клик по нужной вкладке.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
document.addEventListener('DOMContentLoaded', function() { let bc2 = document.querySelectorAll('.hleb-kroxi .g-breadcrumbs-item a span'); let vkladki = document.querySelectorAll('.decstop-projects .w-tabs-item'); if (bc2[1].innerText == "Холодильники") { vkladki[0].click(); } else if (bc2[1].innerText == "Телевизоры"){ vkladki[1].click(); } else if (bc2[1].innerText == "Велосипеды"){ vkladki[2].click(); } else {vkladki[0].click();} }); |
addEventListener — код JS срабатывает после того как html страницы загрузится.
let bc2 = document.querySelectorAll(‘.hleb-kroxi .g-breadcrumbs-item a span’) — получаем массив элементов из «хлебных крошек» (класс «hleb-kroxi» здесь задал в хлебных крошках, чтобы найти расположение нужного элемента).
let vkladki = document.querySelectorAll(‘.decstop-projects .w-tabs-item’) — получаем массив элементов вкладок по которым будет осуществляться событие клика.
В условии «if»
bc2[1].innerText == «Холодильники») {vkladki[0].click()} — если текстовое содержание второго элемента из массива «Хлебных крошек» равно «Холодильники», то сработает событие клика на первом элементе из массива вкладок (т.е. например это и будет вкладка «Холодильники», которая и содержит информацию по ним).
else if (bc2[1].innerText == «Телевизоры»){vkladki[1].click();} — иначе, если текстовое содержание второго элемента из массива «Хлебных крошек» равно «Телевизоры», то сработает событие клика на втором элементе из массива вкладок (т.е. например это и будет вкладка «Телевизоры»).
* [2] — отсчет в массиве начинается с нуля, поэтому [2] это третий элемент, а [0] — первый.
else {vkladki[0].click();}} — если ни одно условие не совпало кликаем по первому элементу (можно задать любое другое).
Решение 2. Можно попробовать решить не через событие клика, а через добавление вкладке класса, например, «active». Тут зависит от того, как реализованы вкладки. В основном разные конструкторы именно так и делают: добавляют активному элементу класс «active», а из предыдущего убирают этот класс. Но, такое решение кажется сложней.