Главная
Web-дизайн
Скрыть часть номера, скрыть весь номер. Показывать номер при нажатии на кнопку.

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

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

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

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

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

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



Пример

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

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

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

<script>
$.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.

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

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




Если Вам был полезным мой труд, можете поддержать сайт :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 2, в среднем: 5 из 5

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко