Хаки и Скрипты Next Generation CMS

Скрываем часть номера телефона как на авито

irbees2008 irbees2008 Опубликовано - 15 - марта JS
6398 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Всем привет, сегодня на форуме был задан интересный вопрос.Как скрыть часть номера телефона, а при нажатии ссылки "показать "показывался . Ну вопрос не из сложных, решений множество как на js так и на php.
Ну я объясню вариант попроще.
Самый простой вариант это js
Итак приступим
1. Добавим стиль в файл стилей

Код:
  .hide-tail{
display: none;
}
Этот стиль будет скрывать блок с номером телефона
2.Теперь подключаем скрипт который будет подменять наш блок и показывать номер.
Код:
<script>
$.fn.textToggle = function(d, b, e) {
return this.each(function(f, a) {
a = $(a);
var c = $(d).eq(f),
g = [b, c.text()],
h = [a.text(), e];
c.text(b).show();
$(a).click(function(b) {
b.preventDefault();
c.text(g.reverse()[0]);
a.text(h.reverse()[0])
})
})
};
$(function(){
$('.click-tel').textToggle(".hide-tail","+7XXXXXXX","скрыть телефон")
});
</script>
Его подключать ниже подключения jquery
3.Сам код с номером телефона
Код:
<span class="hide-tail">+7 999 1112223</span> <a href="#" class="click-tel">показать телефон</a>

Как видите номер заключён в тег span с классом "hide-tail", т.е. блок является не видимым и скрипт выводит значение "+7XXXXXXX" , после клика по ссылке появляется блок с номером и ссылка меняется на "скрыть телефон".
Вот и все , проще не куда ,можно конечно сделать и на css3,но это потом.

Можешь почитать и вот эту статейку "Падающие снежинки на сайт"

Опрос

Ваше мнение

Каким софтом вы пользуетесь?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [10]
  • Гости: [10]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.569сек
  • Потребление памяти: 5.158 Mb 
  •   Яндекс.Метрика