При клике по ссылке, вместо ссылки появляется текст

[Airogen]

Есть скрипт, когда кликаем по ссылке "кликни по мне" в определенном месте страницы появляется текст. А нужно сделать, чтобы эта ссылка пропадала, после того как по ней кликнут, а вместо неё появлялся текст.

<a href='JavaScript:return false' onclick='document.getElementById("Text01").style.visibility="visible"'>Кликни по мне</a>
<hr/>
<p id='Text01' style='visibility: hidden'>Hello world!</p>

[K313]

<u style="cursor:pointer;" onclick="this.innerHTML='new string';this.style.textDecoration='none';">string</u>

[alexandr_v-vich]

http://jsfiddle.net/TGMfF/2/

Это имели ввиду?

Если нужно, чтобы прям на том же месте - используйте display: block/none вместо visibility - http://jsfiddle.net/TGMfF/11/

Edited April 5, 2012 by alexandr_v-vich

[br3t]

<a href='#' onclick='document.getElementById("Text01").style.visibility="visible";this.parentNode.removeChild(this);'>Кликни по мне</a>
<span id='Text01' class='hint'>Hello world!</span>
<hr/>

?.hint {
    visibility: hidden;
}?

[alexandr_v-vich]

Какая отзывчивость за 2 минуты

[SelenIT]

Чисто по приколу

[alexandr_v-vich]

SelenIT, Хром не даёт на такие элементы делать это.

p.s. - тоже сначала об этом подумал)

[SelenIT]

Упс, и точно. А это где-то документировано?

[alexandr_v-vich]

Упс, и точно. А это где-то документировано?

Не знаю. Давно заметил это. Вроде логично поступает, потому решил и не разбираться)

[SelenIT]

Особой логичности в этом не вижу, честно говоря. Подозреваю, что это проявление этого бага (или очень близкого).

[alexandr_v-vich]

SelenIT, да, натыкался на это...жаль англ. плохо знаю, так и не разобрал, про что это...

А что мало логичности чтоли?)) Фокус поставить на ссылку - это логичней?)) Фокус, он и есть фокус, мне кажется он и должен работать там, где он есть) Читабельность кода же аргумент для верстальщика?

[SelenIT]

А что, где-то у ссылки фокуса нет?

[alexandr_v-vich]

SelenIT,

Ну смотри - http://www.w3.org/TR/2000/WD-css3-selectors-20001005/

Там есть

:focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input)

Only elements whose 'user-input' property (see [uI]) has the value of "enabled" can become :active or acquire :focus.

These pseudo-classes are not mutually exclusive. An element may match several of them at the same time

Насколько я понимаю, ссылки не есть "user-input" элементы...

Вообще, повторюсь, у меня проблемы с английским). Сможешь смысл правильный передать?

А по поводу фокуса, ну выше ты писал.....Т.е. пунктирная рамка вокруг ссылки - этот фокус, да?(Всмысле его формальное выражение)

Тогда да, может...не подумал об этом....

Edited April 5, 2012 by alexandr_v-vich

[SelenIT]

SelenIT,

Ну смотри - http://www.w3.org/TR/2000/WD-css3-selectors-20001005/

Там есть

:focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input)

Only elements whose 'user-input' property (see [uI]) has the value of "enabled" can become :active or acquire :focus.

These pseudo-classes are not mutually exclusive. An element may match several of them at the same time

В актуальной спеке (утвержденной в прошлом году как рекомендация) оставили только первую фразу — про возможность активации с клавиатуры (убрав ссылку на тихо почивший css3-userint, от которой была одна непонятность). Но и в новой спеке, и в том древнем черновике чуть ниже красуется пример с a:focus)

А по поводу фокуса, ну выше ты писал.....Т.е. пунктирная рамка вокруг ссылки - этот фокус, да?(Всмысле его формальное выражение)

Тогда да, может...не подумал об этом....

Именно так, та многострадальная рамка — и есть индикатор фокуса по умолчанию. Поэтому и нельзя убирать ее совсем, не оставив ничего взамен (для клавиатурщиков).

[alexandr_v-vich]

SelenIT, т.е. всё же баг?.....

А я выворачивался как-то с textarea....

Не знаешь, это решается как-нибудь? Может бы вполне пригодится

[SelenIT]

Я сам недавно узнал, что фокус начинает ловить любой элемент, которому задан tabindex . Наскоро проверил — вроде какой-то отклик и в IE8 наблюдается...

[alexandr_v-vich]

Здорово. Действительно здорово. Так вот в том примере, там можно и просто img`ы вставлять (наверное). Жаль, конечно, Хром всё подпортил...жаль...

Спасибо, что поделился про этот tabindex

[Airogen]

Перепробовал все варианты, с обычным текстом все хорошо работает, но у меня не совсем текст, рассмотрим на таком примере:

<a href='JavaScript:return false' onclick='this.style.display="none";document.getElementById("Text01").style.display="block"
'>Кликни по мне</a>
<p id='Text01' style='display: none;'>Hello world!</p>

Есть плагин для wordpress который вызывается простым текстом в html

[audio:тут ссылка на песню.mp3]

Есть таблица в которой вызывается этот плагин:

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr><td align="left">4 рота - здравствуй мама</td><td align="center">[audio:1_4_rota_-_zdravstvuy_mama.mp3]</td><td align="center"><a  href="1_4_rota_-_zdravstvuy_mama.mp3" rel="”nofollow”" target="_blank">Скачать</a></td></tr>
</table>

Пример как выглядит таблица

Теперь вместо где есть код

[audio:тут ссылка на песню.mp3]

Я вставил JS^

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr><td align="left">4 рота - здравствуй мама</td><td align="center">
<a href='JavaScript:return false' onclick='this.style.display="none";document.getElementById("Text01").style.display="block"
'>Кликни по мне</a>
<p id='Text01' style='display: none;'>[audio:тут ссылка на песню.mp3]</p>
</td><td align="center"><a  href="1_4_rota_-_zdravstvuy_mama.mp3" rel="”nofollow”" target="_blank">Скачать</a></td></tr>
</table>

И в итоге плагин все равно выводится даже не смотря на то что я не нажимал по ссылке, он тупо выводится под ссылкой

[br3t]

Что выводит ВП вместо "[audio:тут ссылка на песню.mp3]"?

Дайте кусок исходника НТМЛ с таблицей и результатом работы плагина

[Airogen]

Что выводит ВП вместо "[audio:тут ссылка на песню.mp3]"?

Дайте кусок исходника НТМЛ с таблицей и результатом работы плагина

Я и написал:

Пример кода

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr><td align="left">4 рота - здравствуй мама</td><td align="center">
<a href='JavaScript:return false' onclick='this.style.display="none";document.getElementById("Text01").style.display="block"
'>прослушать</a>
<p id='Text01' style='display: none;'>[audio:тут ссылка на песню.mp3]</p>
</td><td align="center"><a  href="1_4_rota_-_zdravstvuy_mama.mp3" rel="”nofollow”" target="_blank">Скачать</a></td></tr>
</table>

И в итоге плагин все равно выводится даже не смотря на то что я не кликал по ссылке "прослушать", он тупо выводится под ссылкой