Пусть у нас есть несколько абзацев:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Давайте переберем эти абзацы циклом и в конец каждого абзаца добавим ссылку, по нажатию на которую тексту абзаца будет добавляться некоторая стилизация. К примеру, текст абзаца будет становится перечеркнутым (это делает CSS свойство text-decoration).
Давайте обсудим два нюанса такой задачи.
Во-первых, как уже обсуждалось в предыдущих уроках, не следует менять стили абзацы напрямую через JavaScript - гораздо удобнее будет навешивать какие-нибудь CSS классы.
Во-вторых, при реализации такой задачи вас ожидает некоторый сюрприз. Чтобы понять его суть, давайте посмотрим на HTML код абзацев после добавления ссылок:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Представим теперь, что по нажатию на ссылку текст абзаца перечеркнется. Однако, ссылка в данном случае также является частью абзаца и тоже перечеркнется! Скорее всего такой эффект нам не нужен. Мы хотим, чтобы текст перечеркивался, но ссылка - нет.
Для решения проблемы нужно просто обернуть
текст абзаца в тег span, вот так:
<p><span>text1</span><a href="">link</a></p>
<p><span>text2</span><a href="">link</a></p>
<p><span>text3</span><a href="">link</a></p>
Дан следующий HTML код:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Добавьте в конец каждого абзаца ссылку, по клику на которую текст абзаца будет перечеркиваться (а ссылка - нет).
Модифицируйте предыдущую задачу так, чтобы после нажатия на ссылку эта ссылка удалялась из абзаца (а текст абзаца становился перечеркнутым).
Дана некоторая HTML таблица. Добавьте в эту таблицу еще одну колонку со ссылкой. По нажатию на эту ссылку ряд с этой ссылкой должен стать зеленого фона.
Модифицируйте предыдущую задачу так, чтобы первое нажатие по ссылке красило ряд в зеленый фон, а второе нажатие отменяло это действие.