Ссылки внутри страницы | WebReference
Ссылки допустимо указывать не только на другой сайт или документ, но и на элемент внутри страницы. Такая возможность применяется для добавления оглавления страницы с быстрым переходом к нужному разделу (так делает, например, Википедия) или для создания различных элементов интерфейса вроде вкладок.
Элемент, на который требуется сделать ссылку, обозначается идентификатором, а адрес ссылки меняет свой вид на #id, как показано в примере 1.
Пример 1. Ссылка на заголовок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> .toc { padding: 0 20px; background: #f0f0f0; display: inline-block; } </style> </head> <body> <div> <h3>Оглавление</h3> <ul> <li><a href=»#t1″>Сепульки</a></li> <li><a href=»#t2″>Сепулькарии</a></li> <li><a href=»#t3″>Сепуление</a></li> </ul> </div> <h3>Сепульки</h3> <p>Важный элемент цивилизации ардритов с планеты Энтеропия.
Результат данного примера показан на рис. 1. К каждому заголовку <h3> добавлен уникальный идентификатор через атрибут id, а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.
Рис. 1. Ссылки на заголовки
Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.
CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target, как показано в примере 2.
Пример 2. Использование :target
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> .toc { padding: 0 20px; background: #f0f0f0; display: inline-block; } h3:target { background: #cd529e; color: #fff; padding: 5px; } </style> </head> <body> <div> <h3>Оглавление</h3> <ul> <li><a href=»#t1″>Сепульки</a></li> <li><a href=»#t2″>Сепулькарии</a></li> <li><a href=»#t3″>Сепуление</a></li> </ul> </div> <h3>Сепульки</h3> <p>Важный элемент цивилизации ардритов с планеты Энтеропия.</p> <h3>Сепулькарии</h3> <p>Устройства для сепуления.</p> <h3>Сепуление</h3> <p>Занятие ардритов с планеты Энтеропия.
Теперь, если переходить по ссылкам оглавления, то заголовки будут менять свой цвет и фон (рис. 2).
Рис. 2. Стиль заголовка при переходе
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Ссылки на элементы шаблона | Vue.js
В этом разделе используется синтаксис однофайловых компонентов в примерах кода
Подразумевается, что уже изучили и разобрались с разделами Введение в Composition API и Основы реактивности. Если нет — прочитайте их сначала.
При использовании Composition API, концепции реактивных ссылок и ссылок на элементы шаблона унифицированы. Чтобы получить ссылку на элемент в шаблоне или экземпляр компонента, необходимо объявить ref-ссылку как обычно и затем вернуть её из setup():
<template>
<div ref="root">Это корневой элемент</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const root = ref(null)
onMounted(() => {
// элемент DOM будет определён в ref после первоначальной отрисовки
console.
log(root.value) // <div>Это корневой элемент</div>
})
return {
root
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
В этом примере предоставляется доступ к root в контексте отрисовки и выполняется его привязка к блоку в качестве ссылки на него через ref="root". В алгоритме обновления виртуального DOM, если ключ
Ссылки, используемые как ссылки на элементы шаблона, ведут себя точно также, как и любые другие ref-ссылки: они реактивны и могут быть переданы в функции композиции (или возвращены из них).
Использование с JSX
export default {
setup() {
const root = ref(null)
return () =>
h('div', {
ref: root
})
// с использованием JSX
return () => <div ref={root} />
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
Использование внутри
v-forВ Composition API ссылки на элементы шаблона не имеют специальной обработки если используются внутри v-for. Поэтому следует использовать функции для выполнения пользовательской обработки:
<template>
<div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
{{ item }}
</div>
</template>
<script>
import { ref, reactive, onBeforeUpdate } from 'vue'
export default {
setup() {
const list = reactive([1, 2, 3])
const divs = ref([])
// убедитесь, что сбрасываете ссылки перед каждым обновлением
onBeforeUpdate(() => {
divs.
value = []
})
return {
list,
divs
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Отслеживание ссылок на элементы шаблона
Отслеживание изменений ссылок на элементы шаблона может быть альтернативой использованию хуков жизненного цикла, как было показано в предыдущем примере.
Главное отличие от хуков жизненного цикла в том, что эффекты watch() и watchEffect() будут запускаться перед монтированием или обновлением DOM, поэтому ссылка на элемент шаблона не будет обновлена при запуске эффекта наблюдателем:
<template>
<div ref="root">Это корневой элемент</div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {
setup() {
const root = ref(null)
watchEffect(() => {
// Этот эффект будет запущен перед обновлением DOM и, следовательно,
// ссылка на элемент шаблона ещё не содержит ссылки на элемент.
console.log(root.value) // => null
})
return {
root
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Поэтому методы наблюдателей, в которых используются ссылки на элементы шаблона, должны объявляться с опцией flush: 'post'. В таком случае эффект будет запускаться после обновления DOM и гарантировать, что ссылки на элементы шаблона останутся синхронизированными с DOM и ссылаются на правильный элемент.
<template>
<div ref="root">Это корневой элемент</div>
</template>
<script>
import { ref, watchEffect } from 'vue'
export default {
setup() {
const root = ref(null)
watchEffect(() => {
console.log(root.value) // => <div>Это корневой элемент</div>
},
{
flush: 'post'
})
return {
root
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- См.
также: Вычисляемые свойства и методы наблюдатели
Оповещения · Bootstrap
- Примеры
- Цвет ссылки
- Дополнительный контент
- Молодец!
- Увольнение
- поведение JavaScript
- Триггеры
- Методы
- События
Предоставляйте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких предупреждающих сообщений.
Примеры
Оповещения доступны для любой длины текста, а также для дополнительной кнопки закрытия. Для правильной укладки используйте один из восьми требуется контекстных класса (например, .alert-success ). Для встроенного отключения используйте плагин оповещений jQuery.
Это основное оповещение — проверьте!
Это вторичное оповещение — проверьте!
Это предупреждение об успехе — проверьте!
Это предупреждение об опасности — проверьте!
Это предупреждение — проверьте!
Это информационное оповещение — проверьте!
Это легкое оповещение — проверьте!
Темное предупреждение — проверьте!
<роль div="предупреждение"> Это основное предупреждение — проверьте его!
Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса 
(Не требуется при использовании автоинициализации data-api.)
Вы можете использовать разные цвета и атрибуты для всех остальных ссылок на странице .
nav a: фокус, div.nav a: активный
{
семейство шрифтов: Arial, Helvetica, без засечек;
дисплей: блок;
ширина: 100%;
} 
nav a:visited /* посещенная ссылка в разделе с названием nav*/
{
цвет: #093;
}
div.nav a:hover /* наведите указатель мыши на ссылку в разделе с названием nav*/
{
цвет:#00F;
украшение текста: подчеркивание;
преобразование текста: верхний регистр;
цвет фона: золото;
}
div.nav a:focus /* вкладка на ссылку в разделе под названием nav */
{ /* для навигации с клавиатуры с помощью клавиши табуляции */
цвет:#00F;
украшение текста: подчеркивание;
преобразование текста: верхний регистр;
цвет фона: золото;
}
div.nav a:active /* выбранная ссылка в разделе под названием nav*/
{
цвет:#F0F;
украшение текста: сквозной;
преобразование текста: нижний регистр;
}
