Как скрыть часть текста, при клике на ссылку показать
Народ подскажите.. Как скрыть номер телефона, например в виде +7 XXX XXXXXXX , а при клике на ссылку Показать, номер отображается +7 999 1112223 Возможно ли это? Или подмену какую-нибудь сделать..
|
|
Спасибо, работает! Еще вопросик, что нужно добавить в эту конструкцию, чтобы при клике на ссылку не швыряло вверх страницы?
|
zahar_92,
какой вариант вы взяли и html ваше? |
zahar_92,
обычно достаточно красное добавить .click(function(event) { event.preventDefault(); |
<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(){
$('.click-tel').textToggle(".hide-tail","+7XXXXXXX").click()
});
</script>
<span class="hide-tail"><?= $v ?></span> //тут телефон <a href="#" class="click-tel">показать телефон</a> В принципе его работа меня устраивает. Не нравятся два момента: 1. при нажатии на ссылку швыряет вверх страницы и 2. при загрузке сайта, телефон сначала показывается на пару секунд, а потом скрывается. И еще, мне нужно закрыть 2 номера на одной странице с классом hide-tail, а скрипт скрывает только один из них. Как сделать, чтобы скрывались оба телефона? Может присвоить разные классы? |
Цитата:
|
На странице 2 телефона с классом hide-tail, а скрипт скрывает один из них, а второй остается в обычном виде.
Кто-нибудь подскажите, пожалуйста, что нужно добавить в этот скрипт:
<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(){
$('.click-tel').textToggle(".hide-tail","+7XXXXXXX").click()
});
</script>
что бы не дергало страницу вверх при клике на ссылку и скрипт скрывал оба номера с общим классом |
zahar_92,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.hide-tail{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<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>
</head>
<body>
<span class="hide-tail">+7 999 1112223</span> //тут телефон
<a href="#" class="click-tel">показать телефон</a> <br>
<span class="hide-tail">+7 999 1112223</span> //тут телефон
<a href="#" class="click-tel">показать телефон</a>
</body>
</html>
|
Благодарю за ответ! Вверх страницы теперь не кидает, но телефон все равно скрывает только один. Классы одинаковые, проверял. У меня один телефон вверху страницы, другой внизу. Если оставить один, например вверху, то он скрывается. Если оставить и вверху и внизу, то нижний скрывается а верхний нет..
И еще вопрос, можно ли после нажатия на ссылку показать номер сделать ее не кликабельной, чтобы при повторном нажатии не скрывала номер? |
| Часовой пояс GMT +3, время: 19:47. |