Внутренние ссылки, выделение блока.

idemidov · March 17, 2014

Есть страница html с внутренними ссылками. Каждая ссылка ведёт на текстовый блок из 1-2 строк внутри страницы.

Проблема: после перехода по ссылке отображается вся страница, нельзя понять, на какую именно строку произошел переход по ссылке.

Варианты решения:
Может быть подсветка блока, на который перешли?
Как реализовать, средствами html/css?

Или что-то другое, что поможет понять пользователю, на какой именно он строке?

Заранее спасибо!

Z1gnet · March 18, 2014

ну вам нужно сделать якорные ссылки и страница будет прокручиваться до места куда ведет ссылка http://htmlbook.ru/samhtml/yakorya

ну а для подсветки вам понадобится джаваскрипт

drval · September 24, 2014

Может для idemidov уже не актуально, сам столкнулся с такой же проблемой. После 2-х часов поиска нашел только отрывки решений с помощью которых удалось таки создать целостный код. Выкладываю сюда может кому пригодится.

Сделано для комментариев к статьям (смесь php, html и js).

Комментарий выводится у нас под каким-то порядковым номером $k.

При клике на этот номер мы получаем в адресной строке ссылку с #$comment_id в конце

$comment_id - номер комментария в БД

<a name="'.$comment_id.'"></a><a title="Кликнуть для получения ссылки на комментарий. Ссылка появится в адресной строке." href="#'.$comment_id.'"><b>'.$k.'</b></a>

1. Для начала обрамляем все куски текста которые могут выделяться (в данном случае текст всех комментариев, в РНР все делается быстро)

<span id="#'.$comment_id.'">'.$contain_comment.'</span>

$contain_comment - текст комментария

2. теперь скрипт:

 <script>     function change_comment_by_link(){    var u=window.location.hash;    var txt=document.getElementById(u).innerHTML;    document.getElementById(u).innerHTML="<div style=\"background-color: #FFFF00\"><b>"+txt+"</b></div>";    return u;     }</script>

впихиваем его в любое место на странице.

u - здесь кусок содержимого адресной строки, значок # и все, что после него - тут номер комментария в БД.

txt - содержимое блока span c id=u.

Далее, думаю пронятно, притуливаем к txt код форматирования. Я сделал жирный шрифт на желтом фоне.

И выводим это все назад в span c id=u.

3. Теперь нужно сделать, что бы этот скрипт выполнялся сразу после загрузки всей страницы. Существует несколько методов реализации этого. Я выбрал попроще. К тэгу

body

добавил атрибут

onload="change_comment_by_link();"

Кстати, непосредственно к body у меня не получилось добавить ничего (формат вывода страниц не позволяет), поэтому я стелал так: код с еще одним body

<script>     function change_comment_by_link(){    var u=window.location.hash;    var txt=document.getElementById(u).innerHTML;    document.getElementById(u).innerHTML="<div style=\"background-color: #FFFF00\"><b>"+txt+"</b></div>";    return u;     }</script><body onload="change_comment_by_link();"></body>

вставил сразу после списка комментариев. (не знаю, насколько это правомерно, нигде не нашел информацию о том можно ли вкладывать один body в другой, но все работает).

Sign In

Внутренние ссылки, выделение блока.

Question

idemidov

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Z1gnet

Link to comment

Share on other sites

drval

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information