Добавить элементу списка класс active при переходё на него с другой страницы

Question

У меня есть две страницы где на одной имеется ссылка которая ведёт на другую страницу с фильтром - при нажатии на элементы которого фильтруются блоки в .products.

Вопрос: Как сделать так чтобы при переходе на страницу с фильтрами у меня в зависимости от того какую ссылку на предыдущей странице я нажму присваивался class="active" для нужного элемента списка?

<a href="another_page.html#tab-0">All</a>
<a href="another_page.html#tab-1">Websites</a>
<a href="another_page.html#tab-2">Mobile</a>
<a href="another_page.html#tab-3">Branding</a>

<ul class="filters">
    <li class="active"><a id="#tab-0" data-filter="all">All</a></li>
    <li><a id="#tab-1" data-filter="web">Websites</a></li>
    <li><a id="#tab-2" data-filter="mobile">Mobiles</a></li>
    <li><a id="#tab-3" data-filter="brand">Branding</a></li>
</ul>
<ul class="products">
    <li data-filter="web">Websites1</li>
    <li data-filter="web">Websites2</li>
    <li data-filter="mobile">Mobiles1</li>
    <li data-filter="mobile">Mobiles2</li>
    <li data-filter="brand">Branding1</li>
    <li data-filter="brand">Branding2</li>
</ul>

Answer 1

попробуй для этих целей использовать псевдокласс :target

#menu{position: fixed; padding: 10px;}

*:target{
color: darkred;
border: 2px dashed green;
}
#filters{
height: 100%;
position: relative;
top: 50px;
z-index: 5;
}
#filters > *{
display: list-item;
height: 30vh;
margin-left: 15px;
}

<div id='menu'>
<a href="#tab0">All</a>
<a href="#tab1">Websites</a>
<a href="#tab2">Mobile</a>
<a href="#tab3">Branding</a>
</div>

<div id="filters">
    <a id="tab0">All</a>
    <a id="tab1">Websites</a>
    <a id="tab2">Mobiles</a>
    <a id="tab3">Branding</a>
</div>

Answer 2

Можно через $_GET передавать параметры:

<a href="another_page.php?tab=0">All</a>
<a href="another_page.php?tab=1">Websites</a>
<a href="another_page.php?tab=2">Mobile</a>
<a href="another_page.php?tab=3">Branding</a>

Сам код фильтров сделать в filter.php:

<ul class="filters">
    <li <?php echo ($_GET['tab'] == 0) ? 'class="active"' : '';?>>
        <a id="#tab-0" data-filter="all">All</a>
    </li>
    <li <?php echo ($_GET['tab'] == 1) ? 'class="active"' : '';?>>
        <a id="#tab-1" data-filter="web">Websites</a>
    </li>
    <li <?php echo ($_GET['tab'] == 2) ? 'class="active"' : '';?>>
        <a id="#tab-2" data-filter="mobile">Mobiles</a>
    </li>
    <li <?php echo ($_GET['tab'] == 3) ? 'class="active"' : '';?>>
        <a id="#tab-3" data-filter="brand">Branding</a>
    </li>
</ul>

А на самой странице another_page.php уже выводить так:

<?php require 'filter.php';?>
<div id="filters">
    <a id="tab0">All</a>
    <a id="tab1">Websites</a>
    <a id="tab2">Mobiles</a>
    <a id="tab3">Branding</a>
</div>

БЛОГ НА HUSL

Добавить элементу списка класс active при переходё на него с другой страницы

Ответы (2 шт):