X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Скрыть часть номера, скрыть весь номер. Показывать номер при нажатии на кнопку.

Приклад
  • 2024-03-29
  • 18043 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

Часто при создании сайтов, я сталкиваюсь с задачей от своих заказчиков, с возможностью скрыть телефонный номер или его часть. Задача стоит скрыть именно главный телефонный номер, который чаще всего размещают в шапке сайта или в подвале. Хотя бывает нужно скрывать и все номера на сайте.

Скрыть часть номера, скрыть весь номер. Показывать номер при нажатии на кнопку.

Зачем скрывать телефонный номер на сайте? Тут причины разные. На сайтах объявлений, это делается, чтобы спам боты не собирали номера клиентов, для спам СМС рассылок. На обычных сайтах могут добавлять такую опцию для отслеживания активности посетителей, для установки целей от Google или Яндекс и тд.

Сделать это можно довольно просто. Нужно поставить на сайт скрипт для скрытия номера. Пример того что получится, можно посмотреть ниже:



Пример

Чтобы скрыть телефонный номер, вам потребуется сделать несколько моментов на своем сайте. Для начала нужно добавить скрипт. Но, для его роботы нужна библиотека jQuery. Если она подключена на сайте, то все отлично, если нет, то нужно ознакомится с статьей Как и где подключить скрипт?. Сама библиотека:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

После библиотеки подключаем сам скрипт, который имеет следующий вид:

<script>
jQuery(document).ready(function($){
$.fn.textToggle = function(cls, str) {
return this.each(function(i) {
$(this).click(function() {
var c = 0, el = $(cls).eq(i), arr = [str,el.text()];
return function() {
el.text(arr[c++ % arr.length]);
}}());
})};
$(function(){
$('.sh_nmr').textToggle(".sh_nmr","").click();
$('.sh_nmr').textToggle(".num_hide","ХХХХХХХ").click();
});
});
</script>

В этом скрипте, вам нужно в будущем только две предпоследние строки:

$('.sh_nmr').textToggle(".sh_nmr","").click();
$('.sh_nmr').textToggle(".num_hide","ХХХХХХХ").click();

Первая строка отвечает за скрытие слова ПОКАЗАТЬ после нажатия. Вторая за замену части номера, ну или всего, если вы немного переделаете.

Чтобы скрипт работал, вам нужно свой номер телефона, часть которого вы хотите скрыть, обернуть в некоторые теги и добавить кнопку показать. Выглядит номер с кодом должен примерно так:

+1234<span class="num_hide">567890</span> <span class="sh_nmr">показать</span>

Часть или весь номер, нужно заключить в тег span с классом - num_hide. После номера добавить кнопку показать, заключенную в тег span с классом - sh_nmr.

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

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 18, в среднем: 3.9 из 5
Читайте також