Опорные точки в HTML

Question

Я довольно прост, когда дело доходит до кодирования сайтов, но я хотел включить опорные точки в мой горизонтальный прокручиваемый сайт.Я попробовал, но он не работает.

Ниже приведен код, который я пробовал - я не уверен, что это связано с тем, что моя навигационная панель не является стандартной <li>, вместо этого яиспользуя отдельные div.Я включу изображение того, как я проектирую сайт, чтобы вы могли понять концепцию.

HTML:

<div id="navbar">
    <div class="tab1" href="#home">
        <div class="text1">Home</div>
    </div>
    <div class="tab2" href="#work">
        <div class="text2">Work</div>
    </div>
    <div class="tab3" href="#about">
        <div class="text3">About</div>
    </div>
</div>

<div id="container">

  <div id="fullscreen">

    <div class="box home" id="home">

    <div class="heading">
        <h1>Hi,</h1>
        <h2>I'm Nathan Wilson</h2>
        <h3>a Graphic Designer based in Nottingham, U.K.</h3>
    </div>

    </div>

    <div class="box work" id="work">

    </div>
    <div class="box about" id="about">

    </div>
  </div>
</div>

Image: https://imgur.com/fh6hq3O

Я хочу, в конце концов, включить плавную прокрутку, но это то, на что я обращаю внимание, как только я исправлю эту проблему.

Answer 1

Вы рядом.Вместо того, чтобы обернуть <div> в <div class="tab1" href="#home">, вам нужно использовать тег привязки <a href="#">Test</a>.Попробуйте это.

<div id="navbar">
	<div class="tab1">
		<a href="#home" class="text1">Home</a>
	</div>
	<div class="tab2">
		<a href="#work" class="text2">Work</a>
	</div>
	<div class="tab3">
		<a href="#about" class="text3">About</a>
	</div>
</div>

<div id="container">

	<div id="fullscreen">

		<div class="box home" id="home">

			<div class="heading">
				<h1>Hi,</h1>
				<h2>I'm Nathan Wilson</h2>
				<h3>a Graphic Designer based in Nottingham, U.K.</h3>
			</div>

		</div>

		<div class="box work" id="work">
			Work Content
		</div>
		<div class="box about" id="about">
			About Content
		</div>
	</div>
</div>

Answer 2

Точки привязки работают из-за свойства, связывающего элементы тега следующим образом

<a href="#anchor-point-1">Where You Click!</a> 

<a name="anchor-point-1"></a> 

Так # anchor-point-1 - это элемент свойства, который привязывается к ИМЯ тега привязки, который можно разместить в любом местеРазметка по вертикали или горизонтали в зависимости от стиля вашего приложения.

вы можете сделать несколько тегов привязки для вкладок типа шаблона

<a href="#anchor-point-tab-1">Where You Click!</a> 

<a name="anchor-point-tab-1"></a> 

<a href="#anchor-point-tab-2">Where You Click!</a> 

<a name="anchor-point-tab-2"></a> 

. Неважно, что вы называететеги, если ваша исходная ссылка и привязка имеют один и тот же элемент привязки HREF = то же свойство NAME.

Вы также можете привязать элементы к элементам div, span и другим тегам для этих типов визуальных элементов и прокрутки.эффекты

Для внутренних атрибутов привязки

Для создания функциональных гиперссылок необходимо знать три атрибута привязки.Это атрибуты href, target и download.

Они также считаются якорями, но не связывают один тег с другим!

Anchor 1: mailto:
<a href="mailto:contact@anchor.com">

Anchor 2: tel:
<a href="tel:5551239876">make call (555)123-9876</a>

Anchor 3: target="_blank"
<a href="https://test.com" target="_blank">

Чтобы узнать о динамике и внутренней работе всехатрибуты тегов A href перейдите по ссылке ниже.

https://html.com/anchors-links/

надеюсь, этого достаточно!

Answer 3

Вы делаете это правильно, за исключением того, что вы должны использовать <a> balise вместо <div>

<a class="tab1" href="#home">
    <div class="text1">Home</div>
</a>