คุณจะเชื่อมโยง (กับ<a>) อย่างไรเพื่อให้เบราว์เซอร์ไปที่หัวข้อย่อยบางหน้าในหน้าเป้าหมายซึ่งตรงข้ามกับด้านบน?
คุณจะเชื่อมโยง (กับ<a>) อย่างไรเพื่อให้เบราว์เซอร์ไปที่หัวข้อย่อยบางหน้าในหน้าเป้าหมายซึ่งตรงข้ามกับด้านบน?
คำตอบ:
หากมี<a name="foo">แท็กหรือแท็กใด ๆ ที่มีid(เช่น<div id="foo">) คุณก็สามารถต่อท้าย#fooURL ได้ มิฉะนั้นคุณจะไม่สามารถลิงค์ไปยังส่วนต่าง ๆ ของหน้าเว็บโดยพลการ
นี่คือตัวอย่างที่สมบูรณ์: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>
การลิงก์เนื้อหาในตัวอย่างหน้าเดียวกัน: <a href="#foo">Jump to #foo on same page</a>
domain.com/#home?page=1วิธีการใช้ ID ใน href?
domain.com/?page=1#home
example.com/#RouteName?page=1#IDเช่น: หนึ่งรายการสำหรับการกำหนดเส้นทางและอีกอันสำหรับการนำทางภายในหน้าปัจจุบัน ในที่สุดฉันก็ใช้โหมด html5 ของ URL เพื่อที่จะลบแฮชแท็กเส้นทาง;) @tomsmeding
คุณใช้สมอและแฮช ตัวอย่างเช่น:
เป้าหมายของลิงค์:
<a name="name_of_target">Content</a>ลิงก์ไปยังเป้าหมาย:
<a href="#name_of_target">Link Text</a>หรือหากเชื่อมโยงจากหน้าอื่น:
<a href="http://path/to/page/#name_of_target">Link Text</a>name_of_targetกับประชาชนได้ คุณไม่จำเป็นต้องใช้<a>แท็กเป็นเป้าหมาย <h3 id='name_of_target'>Content</h3>ดังนั้นเป้าหมายอื่นอาจจะ
เพียงแค่เพิ่มแฮชต่อท้ายด้วย ID ขององค์ประกอบต่อท้าย URL เช่น
<div id="about"></div>และ
http://mysite.com/#aboutดังนั้นลิงก์จะมีลักษณะดังนี้:
<a href="http://mysite.com/#about">About</a>หรือเพียงแค่
<a href="#about">About</a>นี่คือวิธี:
<a href="#go_middle">Go Middle</a>
<div id="go_middle">Hello There</div></a>หลังจากเปิดตัว<div ...>- ไม่แน่ใจว่าคุณกำลังพยายามทำอะไรที่นี่
คุณมีสองทางเลือก:
คุณสามารถวางจุดยึดในเอกสารของคุณดังนี้:
<a name="ref"></a>หรือคุณให้รหัสกับองค์ประกอบ HTML ใด ๆ :
<h1 id="ref">Heading</h1>จากนั้นเพียงเพิ่มแฮชต่อท้าย#refURL ของลิงก์ของคุณเพื่อข้ามไปยังการอ้างอิงที่ต้องการ ตัวอย่าง:
<a href="document.html#ref">Jump to ref in document.html</a>ในวันที่ 12 มีนาคม 2020 มีการเพิ่มฉบับร่างโดย WICG สำหรับชิ้นส่วนข้อความและตอนนี้คุณสามารถเชื่อมโยงไปยังข้อความบนหน้าเว็บราวกับว่าคุณกำลังค้นหาโดยเพิ่มสิ่งต่อไปนี้ลงในแฮช
#:~:text=<Text To Link to>
ตัวอย่างการทำงานในChrome Version 81.0.4044.138:
คลิกที่ลิงค์นี้ควรโหลดหน้านี้ซ้ำและเน้นข้อความของลิงค์
name-attribute สำหรับ -elements<a>อีกต่อไป: แอตทริบิวต์ชื่อในองค์ประกอบนั้นล้าสมัย ลองวางแอตทริบิวต์ id บนคอนเทนเนอร์ที่ใกล้ที่สุดแทน