html — Ссылка с заглушкой
Вопрос задан
Изменён 3 года 1 месяц назад
Просмотрен 4k раза
Как сделать так, чтобы при нажатии на ссылку с заглушкой которая находится, к примеру в середине страницы, не перебрасывало на самый верх страницы? Чтобы положение на странице оставалось на том месте.
.middle { margin-top: 400px; }
<ul> <li><a href="#">Почтовые коробки оригинальные</a></li> <li><a href="#">Почтовые коробки бурые</a></li> <li><a href="#">Почтовые коробки бурые с бланком</a></li> </ul>
- html
- html5
Добавить атрибут «onclick»
<a href="#">текст</a>
.middle { margin-top: 400px; }
<ul> <li><a href="#">Почтовые коробки оригинальные</a></li> <li><a href="#">Почтовые коробки бурые</a></li> <li><a href="#">Почтовые коробки бурые с бланком</a></li> </ul>
Убрать атрибут href
, если href
нужен, то можно добавить onclick="return false;"
.
Ссылка обычно и создается чтобы быть ссылкой или якорем или на начальном этапе разработке когда это пока не имеет значение.
Если нужно что то вроде кнопки на выполнение события то необязательно это делать тегом a
, можно взять тег span
например и добавить ему стили
.middle { margin-top: 400px; }
<ul> <li><a href="#">Почтовые коробки оригинальные</a></li> <li><a href="#">Почтовые коробки бурые</a></li> <li><a href="#">Почтовые коробки бурые с бланком</a></li> </ul>
Можно изменить значение атрибута href="#!
.middle { margin-top: 400px; }
<ul> <li><a href="#!">Почтовые коробки оригинальные</a></li> <li><a href="#!">Почтовые коробки бурые</a></li> <li><a href="#!">Почтовые коробки бурые с бланком</a></li> </ul>
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через FacebookОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
javascript — Как открыть якорную ссылку с отступом сверху?
Задать вопрос
Вопрос задан
Изменён 3 месяца назад
Просмотрен 1k раз
Сверху сайта шапка с меню со свойствами «height: 80px», «background: #……» и «position: fixed».
В середине контентная часть со свойством «margin: 80px 0px 0px 0px» и заголовками с уникальными идентификаторами «id=»…».
В меню шапки ссылки типа «href=»#…» на заголовки в контентной части.
При активации ссылки фокус переходит к заголовку, но он отображается с самого верха страницы, под фоном шапки.
Я конечно догадываюсь, что сделал супер криво, но тем не менее, есть ли вариант перейти на ссылку со сдвигом фокуса от верха страницы в 80px?
* { box-sizing: border-box; } a { text-decoration: none; } ul, li { padding: 0; margin: 0; } hr { padding: 0; margin: 0; } body { padding: 0; margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 16px; background: #E7EBF0; color: #003366; } .wrapper { min-height: 100%; overflow: hidden; display: flex; flex-direction: column; } .container { width: 1170px; margin: 0px auto; background: #E7EBF0; } .header { position: fixed; width: 100%; } .header__row { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #003366; } .header__logo { } .header__image { height: 80px; width: 320px; } .header__catalog { } .header__nav { display: flex; flex-direction: row; } .header__nav a { letter-spacing: 0.10em; height: 31px; color: #003366; text-transform: uppercase; font-weight: normal; background-color: #E7EBF0; padding: 5px; margin: auto 5px; } .header__nav a:hover { color: #663366; background-color: #B1BDCD; transition-duration: 0.5s; } .header__nav a:focus { color: #663366; background-color: #B1BDCD; transition-duration: 0.5s; } .header__nav a:active { color: #660F57; background-color: #B1BDCD; transition-duration: 0.5s; } .header__contacts { } .content { width: 100%; flex: 1 1 auto; margin: 82px auto 20px; } .content__row { display: flex; flex-direction: column; justify-content: center; align-items: center; } .content__about { display: flex; flex-direction: column; margin: 20px; padding: 10px; border: 1px solid #003366; } .content__about-head { display: flex; flex-direction: row; margin: 0px auto 0px 0px; } .content__triangle-top-left { width: 0; height: 0; border-top: 50px solid #003366; border-right: 50px solid transparent; } . ![]()
content__about-title { font-size: 20px; text-transform: uppercase; margin: auto 0px; } .content__about-subtitle { margin: 5px; text-indent: 20px; } .content__about-end { display: flex; flex-direction: row; margin: 0px 0px 0px auto; } .content__triangle-bot-right { width: 0; height: 0; border-bottom: 50px solid #003366; border-left: 50px solid transparent; margin-left: auto; } .content__about-second-title { font-size: 12px; font-style: italic; margin: auto; } .footer__row { display: flex; justify-content: center; align-items: center; border-top: 2px solid #003366; height: 40px; }
<!DOCTYPE html> <html> <head> <title>...</title> <link href="css/style.css" type="text/css" rel="stylesheet" /> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> </head> <body> <div> <header> <div> <div> <a href="../index.html"> <img src="..." alt="..."> </a> <nav> <a href="#about">Ссылка</a> <a href="#catalog">...</a> <a href="#services">...</a> <a href="#contacts">...</a> </nav> <ul type="none"> <li>...</li> <li>...</li> </ul> </div> </div> </header> <content> <div> <div> <div> <div> <div> </div> <p> <a> ID<br /> <br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> 1<br /> </a> </p> </div> <p> </p> <div> <p> .
..<br /> ...<br /> ...<br /> </p> <div> </div> </div> </div> </div> </div> </content> <footer> <div> <div> <a>...</a> </div> </div> </footer> </div> </body> </html>
- javascript
- html
- css
Что бы сохранить возможность прямого обращения по якорным ссылкам извне и при этом иметь возможность скроллить с их помощью к нужным частям документа можно сделать так:
const handleClick = event => { event.preventDefault() const headerOffset = 60 // полная высота header'a const contentAnchors = document.querySelectorAll(".anchor-hash-content") const href = event.target.getAttribute("href") const elementToScroll = Array.from(contentAnchors).filter(item => item.getAttribute("href") === href) const elementPosition = elementToScroll[0].offsetTop window.scrollTo({ top: elementPosition - headerOffset, behavior: "smooth" }) } document.querySelectorAll(".anchor-hash-header").forEach(item => item.addEventListener("click", handleClick)) // игнорирует клики по заголовкам, здесь только для примера document.querySelectorAll(".anchor-hash-content").forEach(item => item.addEventListener("click", event => event.preventDefault()))
body { height: 1000px; } .menu { position: fixed; top: 0; left: 0; right: 0; height: 20px; display: flex; align-items: center; justify-content: center; background-color: red; padding: 20px; } .menu > span { margin-right: auto; } .menu > a { padding: 0 10px; } .anchor-hash-content { display: block; margin: 100px 0; }
<div><span>Меню</span> <a href="aaa">Anchor 1</a> <a href="bbb">Anchor 2</a> </div> <a href="aaa">Content 1</a> <a href="bbb">Content 2</a>
Для того что бы сдвигать заголовок ниже уровня header’a при открытии, как вариант, можно проверять URL при загрузке, и в случае якорей сдвигать заголовок в нужное (видимое) положение:
const scrollToHash = urlHash => { const headerOffset = 60 // полная высота header'a const contentAnchors = document.querySelectorAll(".anchor-hash-content") const elementToScroll = Array.from(contentAnchors).filter(item => item.getAttribute("href") === urlHash) const elementPosition = elementToScroll[0].offsetTop window.scrollTo({ top: elementPosition - headerOffset }) } (() => { const url = new URL(window.location) const urlHash = url.hash if (urlHash) { scrollToHash(urlHash.1substr(1)) // убираем символ # } })()
Сработало вот что:
#about { padding-top: 80px; margin-top: -80px; }2
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
Поделитесь файлом или папкой Dropbox по ссылке
Вы можете создать ссылку на файл или папку в своей учетной записи Dropbox, чтобы поделиться ими с другими. Когда вы делитесь файлом или папкой по ссылке, вы можете предоставить людям с этой ссылкой доступ для редактирования или только для просмотра.
Узнайте, как управлять настройками общего доступа по умолчанию.
Примечания:
- Клиенты Dropbox Professional, Standard, Advanced и Enterprise могут устанавливать дополнительные разрешения для общих ссылок , как пароли и даты истечения срока действия.
- Вы не можете создать общую ссылку на папку с ограниченным доступом .
Еще не пользуетесь Dropbox? Узнайте, как Dropbox помогает вам легко обмениваться папками.
Как создать и поделиться ссылкой Dropbox с доступом для редактирования
Если у вас есть учетная запись Dropbox Basic, Professional или Plus, вы можете предоставить другим пользователям Dropbox доступ для редактирования ваших файлов или папок Dropbox с помощью ссылки. Если вы поделитесь с кем-то, у кого нет учетной записи Dropbox, он сможет только предварительно просмотреть файл или папку.
Примечание: Если вы предоставите другому пользователю Dropbox доступ к файлу или папке, он сможет создать свою собственную ссылку, чтобы поделиться этим содержимым с другими. Если вы являетесь администратором команды Dropbox, вы можете управлять настройками ссылок для всех.
Узнайте, как управлять настройками общей ссылки для вашей команды.
На сайте dropbox.com
- Войдите на сайт dropbox.com.
- Наведите указатель мыши на файл или папку, которыми хотите поделиться, и щелкните значок общего доступа (прямоугольник со стрелкой вверх).
- В раскрывающемся списке выберите , можно редактировать .
- Если ссылка не создана, нажмите Создать .
- Если ссылка была создана, нажмите Скопировать ссылку .
- Ссылка скопирована в буфер обмена.
Затем вы можете вставить его в электронное письмо, сообщение или в любое другое место, где люди могут получить к нему доступ.
Примечание . Если получатель ссылки является членом бизнес-группы Dropbox, его возможность редактировать содержимое зависит от разрешений этой группы.
Как создать ссылку Dropbox и поделиться ею с доступом только для просмотра
Если кто-то получит ссылку общего доступа или общий файл с правами только просмотра, он не сможет редактировать исходный файл.
На сайте dropbox.com
- Войдите на сайт dropbox.com.
- Наведите указатель мыши на файл или папку, которыми хотите поделиться, и щелкните значок общего доступа (прямоугольник со стрелкой вверх).
- В раскрывающемся списке выберите , можно просмотреть ..
- Если ссылка не создана, нажмите Создать .
- Если ссылка была создана, нажмите Скопировать ссылку .
- Ссылка скопирована в буфер обмена.
Затем вы можете вставить его в электронное письмо, сообщение или в любое другое место, где люди могут получить к нему доступ.
На вашем компьютере
- Откройте папку Dropbox в Проводнике (Windows) или Finder (Mac).
- Щелкните правой кнопкой мыши или щелкните, удерживая команду, файл или папку, которыми вы хотите поделиться.
- Нажмите Поделиться… .
- Выбрать Можно просмотреть .
Примечание: При совместном использовании папки выберите из раскрывающегося меню.
- Если ссылка не создана, нажмите Создать ссылку .
- Если ссылка была создана, нажмите Скопировать ссылку
- Ссылка скопирована в буфер обмена. Затем вы можете вставить его в электронное письмо, сообщение или в любое другое место, где люди могут получить к нему доступ.
Управление ссылками с правами редактирования или просмотра
Вы можете вносить изменения в ссылку на файл или папку после предоставления общего доступа.
Узнайте, как управлять разрешениями на общий доступ Dropbox.
Есть несколько исключений:
- Если вы лишаете кого-либо доступа, но у него все еще есть ссылка на файл или папку, он может восстановить доступ. Чтобы они не смогли восстановить доступ, удалите ссылку.
Узнайте, как удалить ссылку на файл или папку. - Если кто-то, с кем вы поделились ссылкой на папку, добавил эту папку в свою учетную запись Dropbox, установленные вами разрешения для ссылки больше не будут применяться.
Узнайте о добавлении общих папок. - Если вы пригласите кого-то к файлу или папке с доступом, они могут создать свою собственную ссылку, чтобы поделиться ею с кем-то еще. Вы не можете управлять этими общими ссылками, поэтому обязательно делитесь ими только с теми, кому доверяете.
Настройка ссылок и настроек
Пользователи Dropbox Professional, Standard, Advanced и Enterprise могут изменять настройки ссылок и настраивать общие ссылки с профессиональным брендингом .
Нам очень жаль это слышать.
Дайте нам знать, как мы можем улучшить:
Спасибо за отзыв!
Дайте нам знать, как эта статья помогла:
Спасибо за отзыв!
Компоненты: | Next.js
Примеры- Привет, мир
- Active className на ссылке
— это компонент React, который расширяет элемент HTML
для обеспечения предварительной выборки и навигации между маршрутами на стороне клиента. Это основной способ навигации между маршрутами в Next.js.
Например, рассмотрим каталог pages
со следующими файлами:
-
pages/index.js
-
страницы/about.js
-
страницы/блог/[slug].js
У нас может быть ссылка на каждую из этих страниц, например:
import Link from 'next/link' функция Дом () { возвращаться ( <ул>
Вот сводка реквизитов, доступных для компонента Link:
Стойка | Пример | Тип | Требуется |
---|---|---|---|
href | href="/dashboard" | Строка или объект | Да |
заменить | replace={false} | Boolean | — |
prefetch | prefetch={false} 90 192 | Логический | - |
Полезно знать :
Атрибуты тега
, такие какclassName
илиtarget="_blank"
, могут быть добавлены кв качестве реквизита и будут переданы нижележащему
элемент.
href
(обязательно)Путь или URL-адрес для перехода.
Dashboard
href
также может принимать объект, например:
// Перейти к /about?name=test <Ссылка ссылка = {{ путь: '/о', запрос: {имя: 'тест'}, }} > О
заменить
По умолчанию false
. Когда true
, next/link
заменит текущее состояние истории вместо добавления нового URL-адреса в стек истории браузера.
импортировать ссылку из 'далее/ссылка' функция экспорта по умолчанию Page() { возвращаться ( <Ссылка href="/dashboard" заменить> Панель приборов Ссылка> ) }
предварительная выборка
По умолчанию true
. Когда true
, next/link
выполнит предварительную загрузку страницы (обозначается href
) в фоновом режиме. Это полезно для повышения производительности навигации на стороне клиента. Любой
во вьюпорте (изначально или через прокрутку) будет предварительно загружен.
Предварительную выборку можно отключить, передав prefetch={false}
. Предварительная выборка включена только в рабочей среде.
импортировать ссылку из 'далее/ссылка' функция экспорта по умолчанию Page() { возвращаться ( Панель приборов Ссылка> ) }
legacyBehavior
Элемент
больше не требуется в качестве дочернего элемента
. Добавьте реквизит legacyBehavior
, чтобы использовать устаревшее поведение, или удалите
для обновления. Кодмод доступен для автоматического обновления вашего кода.
Полезно знать : когда для
legacyBehavior
не установлено значениеtrue
, все свойства тегапривязки
могут быть переданы вnext/link
, например,className
, 9019 1 onClick и т.д.
passHref
Заставляет Link
отправить свойство href
его дочернему элементу. По умолчанию false
прокрутка
Прокрутка к началу страницы после навигации. По умолчанию true
мелкое
Обновить путь к текущей странице без повторного запуска getStaticProps
, getServerSideProps
или getInitialProps
. По умолчанию false
локаль
Активная локаль добавляется автоматически. языковой стандарт
позволяет указать другой языковой стандарт. Когда false
href
должен включать локаль, так как поведение по умолчанию отключено.
Связывание с динамическими маршрутами
Для динамических маршрутов удобно использовать шаблонные литералы для создания пути ссылки.
Например, вы можете создать список ссылок на динамический маршрут pages/blog/[slug].js
import Link from 'next/link' функция Сообщения({сообщения}) { возвращаться ( <ул> {posts.map((сообщение) => (
Если дочерний элемент является пользовательским компонентом, заключающим в себе тег
Если дочерний элемент Link
является пользовательским компонентом, заключающим в себе тег
, необходимо добавить passHref
в Link
. Это необходимо, если вы используете такие библиотеки, как styled-components. Без этого тег
не будет иметь атрибут href
, что ухудшит доступность вашего сайта и может повлиять на SEO. Если вы используете ESLint, есть встроенное правило next/link-passhref
для обеспечения правильного использования passHref
.
импортировать ссылку из 'далее/ссылка' импортировать стили из 'styled-components' // Это создает пользовательский компонент, который обертывает тег const RedLink = styled.a` красный цвет; ` функция NavLink({ href, имя }) { возвращаться ({имя Ссылка> ) } экспорт по умолчанию NavLink
- Если вы используете функцию прагмы JSX для эмоций (
@jsx jsx
), вы должны использоватьpassHref
, даже если вы используете тег - Компонент должен поддерживать свойство
onClick
для правильного запуска навигации
Если дочерний элемент является функциональным компонентом
Если дочерний элемент Link
является функциональным компонентом, помимо использования passHref
и legacyBehavior
, вы должны обернуть компонент в React.
: 90 003 forwardRef
импортировать ссылку из 'далее/ссылка' // `onClick`, `href` и `ref` нужно передать элементу DOM // для правильной обработки const MyButton = React.forwardRef(({ onClick, href }, ref) => { возвращаться ( Нажми на меня ) }) функция Дом () { возвращаться ( <Моя кнопка /> Ссылка> ) } экспорт по умолчанию Домашняя страница
С объектом URL
Ссылка
также может получать объект URL и автоматически форматировать его для создания строки URL. Вот как это сделать:
импортировать ссылку из 'далее/ссылка' функция Дом () { возвращаться ( <ул>
В приведенном выше примере есть ссылка на:
- Предопределенный маршрут:
/about?name=test
- Динамический маршрут:
/blog/my-post
Вы можете использовать любое свойство, как определено в документации по URL-модулю Node. js.
Заменить URL-адрес вместо отправки
Поведение по умолчанию компонента Ссылка
заключается в отправке
нового URL-адреса в стек истории
. Вы можете использовать реквизит replace
, чтобы предотвратить добавление новой записи, как в следующем примере:
<Ссылка href="/about" заменить> О нас
Отключить прокрутку вверх страницы
По умолчанию Link
прокручивает страницу вверх. Когда определен хэш, он будет прокручиваться до определенного идентификатора, как обычный тег
. Чтобы предотвратить прокрутку вверх / хеш scroll={false}
можно добавить к Link
:
Отключает прокрутку вверх ссылка>
ПО промежуточного слоя
Обычно ПО промежуточного слоя используется для проверки подлинности или других целей, связанных с переписыванием пользователя на другую страницу. Чтобы компонент
правильно выполнял предварительную выборку ссылок с перезаписью через ПО промежуточного слоя, необходимо указать Next.js как отображаемый URL-адрес, так и URL-адрес для предварительной выборки. Это необходимо, чтобы избежать ненужных выборок промежуточного программного обеспечения, чтобы узнать правильный маршрут для предварительной выборки.
Например, если вы хотите обслуживать /dashboard
с проверкой подлинности и просмотрами посетителей, вы можете добавить что-то похожее на следующее в свое промежуточное ПО, чтобы перенаправить пользователя на правильную страницу:
промежуточное ПО функции экспорта (req) { const nextUrl = req.nextUrl если (nextUrl.pathname === '/приборная панель') { если (req.cookies.authToken) { return NextResponse.rewrite(новый URL('/auth/dashboard', req.url)) } еще { return NextResponse.rewrite(новый URL('/public/dashboard', req.url)) } } }
В этом случае вы хотели бы использовать следующий код в своем
компонент:
импортировать ссылку из 'следующей/ссылки' импортировать useIsAuthed из './hooks/useIsAuted' функция экспорта по умолчанию Page() { константа isAuthend = useIsAuthend() постоянный путь = isAuthed ? '/auth/приборная панель' : '/приборная панель' возвращаться ( <Ссылка as="/dashboard" href={путь}> Панель приборов Ссылка> ) }
Полезно знать : Если вы используете динамические маршруты, вам необходимо адаптировать
как реквизит
иhref
. Например, если у вас есть динамический маршрут, такой как/dashboard/[user]
, который вы хотите по-другому представить с помощью промежуточного программного обеспечения, вы должны написать:Профиль
.
Версия | Изменения |
---|---|
v13.0.0 | Больше не требуется дочерний элемент 9019 1 тег .![]() |