Как передать функции набора номера значку

Question

Мне нужно делать каждый раз, когда вы нажимаете на номер или значок набора, который будет набирать на нашем мобильном телефоне.

Я сделал каждый раз, когда нажимаю на номер, который он собирается набрать, но я не знаю, как это сделать для значка.

.contact-list { 
 
\t background: #fff; 
 
\t background-size: 30px; 
 
\t padding-left: 10px; 
 
\t padding-top: 10px; // 
 
\t padding-bottom: 7px; 
 
\t border-bottom: 1px dashed #999; 
 
}

<div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588"> 
 
\t \t <h2>Fire</h2> 
 
\t \t <p> 
 
\t \t \t <span><a data-rel="external" 
 
\t \t \t \t data-tel="974-4433665588" href="tel:974-4433665588" 
 
\t \t \t \t style="color: #333946; text-decoration: none; font-weight: normal;">974-4433665588</a></span> 
 
\t \t \t <span><img src="img/contact.png" alt="974-4433665588" style="width: 28px;float: right;margin-top: -19px !important;margin-right: 13px;" /></span> 
 
\t \t </p> 
 
\t </div>

Answer 1

Вам нужно обернуть значок в a тега смотрите ниже:

<div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588"> 
      <h2>Fire</h2> 
      <p> 
       <span><a data-rel="external" 
        data-tel="974-4433665588" href="tel:974-4433665588" 
        style="color: #333946; text-decoration: none; font-weight: normal;">974-4433665588</a></span> 
       <span><a href="tel:974-4433665588"> 
<img src="img/contact.png" alt="974-4433665588" style="width: 28px;float: right;margin-top: -19px !important;margin-right: 13px;" /></a></span> 
      </p> 
     </div> 

Answer 2

Просто завернуть изображение в ссылку (<a> тегов).

<a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588"> 
    <img src="https://image.freepik.com/free-icon/phone-call_318-62608.png" alt="974-4433665588" class="phone-image"/> 
</a> 

Вот полный код:

.contact-list { 
 
    background: #fff; 
 
    background-size: 30px; 
 
    padding-left: 10px; 
 
    padding-top: 10px; // 
 
    padding-bottom: 7px; 
 
    border-bottom: 1px dashed #999; 
 
} 
 
.phone-label { 
 
    color: #333946; 
 
    text-decoration: none; 
 
    font-weight: normal; 
 
} 
 
.phone-image { 
 
    width: 28px; 
 
    float: right; 
 
    margin-top: -5px !important; 
 
    margin-right: 13px; 
 
}

<div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588"> 
 
    <h2>Fire</h2> 
 
    <p> 
 
    <span> 
 
     <a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588" class="phone-label">974-4433665588</a> 
 
    </span> 
 
    <span> 
 
     <a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588"> 
 
     <img src="https://image.freepik.com/free-icon/phone-call_318-62608.png" alt="974-4433665588" class="phone-image"/> 
 
     </a> 
 
    </span> 
 
    </p> 
 
</div>

Answer 3

Как уже было сказано поставив <a> метки вокруг DIV будет решить эту проблему.

Но пока я смотрел на него, я думал, что немного переместил его и познакомил вас с flexbox, что очень полезно для стилизации.

Всегда лучше иметь файл css, а не делать встроенные стили. она выглядит аккуратнее и проще изменить (как вы только сделать это один раз, даже если стиль повторяется)

.phone-link { 
 
    text-decoration: none; 
 
} 
 
.contact-list { 
 
    background: #fff; 
 
    background-size: 30px; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 7px; 
 
    border-bottom: 1px dashed #999; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.phone-no h2 { 
 
    color: #000; 
 
} 
 
.phone-no { 
 
    color: #333946; 
 
    font-weight: 400; 
 
} 
 
.phone-icon { 
 
    margin: 13px; 
 
} 
 
.filler { 
 
    flex: 1; 
 
}

<a data-rel="external" data-tel="974-4433665588" href="tel:974-4433665588" class="phone-link"> 
 
    <div class="contact-list" data-tel="974-4433665588" href="tel:974-4433665588"> 
 
    <span class="phone-no"> 
 
     <h2>Fire</h2> 
 
     974-4433665588 
 
    </span> 
 
    <span class="filler"></span> 
 
    <span class="phone-icon"> 
 
     <img src="http://www.toyotaoftricities.com/assets/d1123/img/phone_icon.png" alt="974-4433665588" /> 
 
    </span> 
 
    </div> 
 
</a> 
 
<a data-rel="external" data-tel="974-1223344556" href="tel:974-1223344556" class="phone-link"> 
 
    <div class="contact-list" data-tel="974-1223344556" href="tel:974-1223344556"> 
 
    <span class="phone-no"> 
 
     <h2>Police</h2> 
 
     974-1223344556 
 
    </span> 
 
    <span class="filler"></span> 
 
    <span class="phone-icon"> 
 
     <img src="http://www.toyotaoftricities.com/assets/d1123/img/phone_icon.png" alt="974-4433665588" /> 
 
    </span> 
 
    </div> 
 
</a>