Блог

Главная - Вопросы по программированию - Как я могу создать эти карточки так, чтобы при нажатии на них открывалась ссылка на новую страницу?

Как я могу создать эти карточки так, чтобы при нажатии на них открывалась ссылка на новую страницу?

#javascript #html #css

Вопрос:

Я хочу, чтобы пользователь мог щелкнуть в любом месте этих полей и быть перенаправленным на файл по ссылке.

как я могу это сделать? Вот как это выглядит прямо сейчас, единственный способ перейти по ссылке-это нажать синюю ссылку в данный момент.

#10;

вот код для карт.

  <div class="card card1">
<br>

    <a href="breathing-tool.html">Rhythmic Breathing Guide</a>
<br>
<br>


    <p> Proper breathing helps to reduce anxiety by increasing the flow of oxygen throughout the body. 
      <br> <br>
      This excercise is designed to deliver the best timing of deep breathing suggested by health specialists.
      <br> <br>
      Practice this for 5 to 10 minutes daily. 
    </p>
    </div> 


<div class="card card2">
     
<br>
      
  <a href="pink-meditation.html">Pink Meditation</a>
<br>
<br>
  <p> This is a medititation space to help calm and reduce anxiety.</p>

 <br>
   <p> This design was inspired by the psychological calming effects of the colour pink which has been used in famous arts.  </p>
<br>
   <p> Please use this for no more than 20 to 30  minutes a day, as long periods of exposure to pink can have adverse effects. </p>
    </div> 

       
      

      <div class="card card3">
   <br>
 <a href="quote-generator.html"> Quote Generator</a>
       <br>
       <br>
       <p> This is a collection of quotes that you can read when you need to be inspired.  </p>
<br>
       <p> A motivational quote has the power to affect your mood leading to possitive changes to the way you act and react. </p>
<br>
      <p> Reading a few of these possitive quotes at the beggining of the day can make a possitive impact on your mindset. </p>
        </div>

CSS

 .card{                                                                 
width: 200px;
height: 230px;
font-size: 11px;
display: inline-block;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
margin: 30px 70px;
background-image: url(images/pink2.png);
background-position: center;
background-size: cover;
transition: transform 0.5s;

Комментарии:

1. Оберните весь div в <a> тег

2. Просто оберните весь контент в a то (HTML5 снял ограничения, что ссылки не могут содержать такие элементы блоков, как p ).

3. Вышеописанное решение работает идеально. Вы также можете добавить onclick слушателя на карточки, чтобы перейти по URL-адресу

4. Привет, спасибо за ваш комментарий. Я сделал, как ты сказал, и это не сработало. Я скоро обновлю код, поэтому, пожалуйста, дайте мне знать, если вы это имели в виду

Ответ №1:

Заверните карты в свои <a> элементы.

 <a href="breathing-tool.html">
  <div class="card card1">
    <br>
    <h5>Rhythmic Breathing Guide</h5>
    <br>
    <br>
      Text
  </div>
</a>
Метки: ,