X
Заказать услугу

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

Плагины и Шаблоны для Wordpress
  • 2019-01-18
  • 3897 просмотр

    11 комментарий

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

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

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

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

Зачем скрывать телефонный номер на сайте? Тут причины разные. На сайтах объявлений, это делается, чтобы спам боты не собирали номера клиентов, для спам СМС рассылок. На обычных сайтах могут добавлять такую опцию для отслеживания активности посетителей, для установки целей от 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
Проголосовало: 8, в среднем: 4.5 из 5
Читайте также
Опубликовано 11 комментариев

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

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Нажмите, чтобы добавить код в комментарий. Далее добавьте свой код внутрь тегов <code> тут код </code>
Я ознакомлен(а) с политикой конфиденциальности и даю согласие на обработку персональных данных*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.