Home>

Please tell me how you can implement in JS the selection of the desired card and the transition to the link with the desired parameter on it. First, we select the card, it becomes active and highlighted in green, and then, by pressing Go, the desired transition occurs.

<
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 >

if you click on the Music card, it becomes active and then clicking on Go, follow the linkhttps://www.yandex.by/search/?text=music

Thank you!

  • Answer # 1

    how can be implemented in JS

    For example, like this:

    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 >
    
  • Answer # 2

    how can be implemented in JS

    For example, like this:

    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 >