Замена тегов HTML документа на jQuery

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

Замена тегов HTML документа на jQuery

Сообщение Slash » Ср фев 17, 2016 11:02 am

Краткое описание, как заменить тег на другой в HTML документе на jQuery. Например необходимо по клику ссылке убрать саму ссылку, оставить только её анкор, или полностью заменить ссылку на блок. Замену будет производить функция replaceWith(), данная функция как раз и создана для замены HTML тегов.

Для работы сценария, необходимо подключить jQuery, для этого вставьте следующею строчку в свой документ:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Сами ссылки, от которых останется только анкор после щелчка:

Код: Выделить всё

<a href="page1.html">Первая страница</a>
<
a href="page2.html">Вторая страница</a>
<
a href="page3.html">Третья страница</a

Код замены ссылок на их анкор:

Код: Выделить всё

<script type="text/javascript">
$(
'a').click(function()
{
    $(
this).replaceWith($(this).text());
    return 
false;
});
</script>

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

Что бы по клику ссылки, ссылка заменялась на блок (<div>) достаточно в функцию replaceWith() дописать соответствующие теги, например:

Код: Выделить всё

$('a').click(function()
{
    $(
this).replaceWith('<div>' + $(this).text() + '</div>');
    return 
false;
}); 

Добавить стиль оформления блока и готово!

Спасибо за внимание.
Реклама

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость