Переход (в новой вкладке) на разные страницы при выборе карточки и нажатии кнопки

Question

Подскажите пожалуйста, как можно реализовать на JS выбор нужной карточки и переход по ссылки с нужным параметром по ней. Сначала выбираем карточку, она становится активной и подсвечивается зеленым, и затем, нажимая Go происходит нужный переход.

<section>
  <ul>
    <li class="active">
      <h2>Music</h2>
      <p>music</p>
    </li>
    <li>
      <h2>Movies</h2>
      <p>movies</p>
    </li>
    <li>
      <h2>Games</h2>
      <p>games</p>
    </li>
  </ul>
  <a href="https://www.yandex.by/search/?text=" id="link">Go</a>
</section>

если нажать на карточку Music, она становится активной и далее нажимая на Go, переходим по ссылке https://www.yandex.by/search/?text=music

Спасибо!

Answer 1

как можно реализовать на JS

Например, вот так можно:

const list = document.querySelector('section ul');
list.addEventListener('click', evt => {
  const card = evt.target.closest('li'),
        search = card?.querySelector('p')?.textContent;
  if (!search) return;
  card.parentElement.querySelector('.active')?.classList.remove('active');
  card.classList.add('active');
  const link = document.querySelector('#link');
  link.href = link.href.replace(/([?&]text=)[^&]*/i, `$1${search}`);
});
list.firstElementChild.click();

section { text-align: center; }
ul { list-style: none; display: flex; justify-content: center; gap: 1rem; padding: 0; }
li { flex: 0 0 7rem; padding: 1rem; box-shadow: 0 0 0 1px #0007; transition: 0.3s ease; }
li.active { background: #0d04; box-shadow: 0 0.25rem 0.5rem 0 #0004; }
h2, p { margin: 0.5rem; }
#link { display: block; width: 200px; margin: 0 auto; padding: 1em; border: 1px solid #0007; }

<section>
  <ul>
    <li class="active">
      <h2>Music</h2>
      <p>music</p>
    </li>
    <li>
      <h2>Movies</h2>
      <p>movies</p>
    </li>
    <li>
      <h2>Games</h2>
      <p>games</p>
    </li>
  </ul>
  <a href="https://www.yandex.by/search/?text=" id="link">Go</a>
</section>

БЛОГ НА HUSL

Переход (в новой вкладке) на разные страницы при выборе карточки и нажатии кнопки

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