Да, это возможно с небольшими изменениями в вашем дизайне, и добавив немного стиля CSS и JavaScript, можно добиться того, чего вы хотите.
Во-первых, я предлагаю внести небольшие изменения в вашна главной странице, чтобы позже было легче получить строку запроса:
#Main Page
<div>
<a href="second-page.html?t=sweet">Sweet</a>
<a href="second-page.html?t=sour">Sour</a>
<a href="second-page.html?t=bitter">Bitter</a>
<a href="second-page.html?t=savoury">Savoury</a>
</div>
Затем на вашей второй странице я бы предложил изменить атрибуты с data-filter
на class
, так как это прощенацеливаться и манипулировать с помощью JavaScript, затем добавить стиль css и Javascript:
<head>
<style>
.taste {display: none; }
.show {display: block; }
</style>
</head>
<body>
<div class="taste sweet">1</div>
<div class="taste bitter">2</div>
<div class="taste bitter sour">3</div>
<div class="taste sour">4</div>
<div class="taste savoury sour">5</div>
<div class="taste savoury">6</div>
<script>
(function () {
// get the query string from url
const params = new URLSearchParams(location.search);
const query = params.get("t"); //get t=query_string
// use the query string to select the related divs
const taste = document.querySelectorAll(`.${query}`);
for (let i = 0; i<taste.length; i++) {
taste[i].classList.add("show"); // add css class to those divs
}
})();
</script>
</body>
Все div-ы установлены в display:none
в начале и использовать строку запроса, чтобы решить, какой div должен быть установлен в .show
(т.е. сделать его видимым динамически на основе строки запроса).