Якоря в HTML |
|
| 29 марта 2013 75861 |
Инструкции по применению, руководства по монтажу или страницы с ответами на наиболее частые вопросы, как правило, очень длинные — поэтому, использование якорей значительно облегчает навигацию по ним.
Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке.
Можно создать якорную навигацию по размеченному тексту вручную или, используя jQuery, в автоматическом (динамическом) режиме.
1. Простая навигация с использованием якоря.
<li><a href="#zag1">Заголовок #1</a></li>
<li><a href="#zag2">Заголовок #2</a></li>
<li><a href="#zag3">Заголовок #3</a></li>
<li><a href="#zag4">Заголовок #4</a></li>
</ul>
...
<p><a name="zag1"></a></p>
<h3>Заголовок #1</h3>
<p><a name="zag2"></a></p>
<h3>Заголовок #2</h3>
<p><a name="zag3"></a></p>
<h3>Заголовок #3</h3>
<p><a name="zag4"></a></p>
<h3>Заголовок #4</h3>
Для создания якоря следует сделать закладку в соответствующем месте и дать ей имя при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди.
<a href="#якорь">Ссылка на якорь</a>
2. Автоматическая генерация якорного меню с помощью jQuery.
Скрипт динамически генерирует список для навигации и подсвечивает заголовок при клике на якорную ссылку.
Разметка.
<div class="all-items">
<h3 id="zag1">Заголовок #1</h3>
<!-- текст -->
<h3 id="zag2">Заголовок #2</h3>
<!-- текст -->
<h3 id="zag3">Заголовок #3</h3>
<!-- текст -->
<h3 id="zag4">Заголовок #4</h3>
<!-- текст -->
</div>
</article>
Подключаем скрипты.
<script>
var ToC =
"<nav role='navigation' class='table-of-contents'>" +
"<h2>Меню:</h2>" +
"<ul>";
var newLine, el, title, link;
$("article h3").each(function() {
el = $(this);
title = el.text();
link = "#" + el.attr("id");
newLine =
"<li>" +
"<a href='" + link + "'>" +
title +
"</a>" +
"</li>";
ToC += newLine;
});
ToC +=
"</ul>" +
"</nav>";
$(".all-items").prepend(ToC);
</script>
Подключаем стили.
.table-of-contents
{
background: none repeat scroll 0 0 #EFEFEF;
float: right;
font-size: 1em;
margin: 0 0 1em 3em;
padding: 1em 2em;
width: 26%;
}
.table-of-contents ul
{
padding: 0;
}
.table-of-contents li
{
list-style-position: outside;
list-style-type: decimal;
margin: 0 0 0.25em 0;
}
.table-of-contents a
{
text-decoration: underline;
}
h3:target
{
animation: highlight 1s ease;
}
@keyframes highlight
{
from
{
background: yellow;
}
to
{
background: white;
}
}
</style>
Использованы источники:
