href =“ #” คืออะไรและทำไมจึงใช้

href="#"บนเว็บไซต์จำนวนมากที่ผมเห็นการเชื่อมโยงที่มี มันหมายความว่าอะไร? ใช้ทำอะไร?

เกี่ยวกับไฮเปอร์ลิงก์:

ใช้หลักของแท็กสมอ - <a></a>- เป็นเชื่อมโยงหลายมิติ นั่นหมายความว่าพวกเขาพาคุณไปที่อื่น ไฮเปอร์ลิงก์จำเป็นต้องใช้hrefคุณสมบัติเนื่องจากระบุตำแหน่งที่ตั้ง

กัญชา:

แฮช - #ภายในไฮเปอร์ลิงก์จะระบุรหัสองค์ประกอบ HTML ที่หน้าต่างควรเลื่อน

href="#some-id"<div id="some-id">จะเลื่อนไปที่องค์ประกอบบนหน้าปัจจุบันเช่น

href="https://stackoverflow.com//site.com/#some-id"จะไปที่site.comและเลื่อนไปที่ id ในหน้านั้น

เลื่อนไปด้านบน:

href="#"ไม่ได้ระบุชื่อ id แต่มีตำแหน่งที่สอดคล้องกัน - ด้านบนของหน้า การคลิกที่สมอด้วยhref="#"จะเป็นการย้ายตำแหน่งการเลื่อนไปด้านบน

ดูการสาธิตนี้

นี่เป็นพฤติกรรมที่คาดหวังตามเอกสาร w3

ตัวยึดตำแหน่งเชื่อมโยงหลายมิติ:

ตัวอย่างที่ตัวยึดตำแหน่งการเชื่อมโยงหลายมิติเข้าท่าอยู่ภายในตัวอย่างเทมเพลต ในการสาธิตเทมเพลตหน้าเดียวฉันมักจะเห็น<a href="#">เพื่อให้แท็ก anchor เป็นไฮเปอร์ลิงก์ แต่ไม่ไปไหน ทำไมไม่ปล่อยให้hrefทรัพย์สินว่างเปล่า hrefคุณสมบัติที่ว่างเปล่าเป็นจริงการเชื่อมโยงหลายมิติไปยังหน้าปัจจุบัน กล่าวอีกนัยหนึ่งมันจะทำให้เกิดการรีเฟรชหน้า ที่ฉันกล่าวถึงhref="#"ก็คือการเชื่อมโยงหลายมิติและทำให้เกิดการเลื่อน ดังนั้นทางออกที่ดีที่สุดสำหรับตัวยึดตำแหน่งไฮเปอร์ลิงก์จึงเป็นhref="#!"ความคิดที่นี่คือหวังว่าจะไม่มีองค์ประกอบในหน้าเว็บด้วยid="!" (ใครทำอย่างนั้น!?) และการเชื่อมโยงหลายมิติจึงอ้างถึงอะไรเลย

เกี่ยวกับแท็กสมอ:

คำถามอีกข้อที่คุณอาจสงสัยคือ "ทำไมไม่ปล่อยทรัพย์สิน href ออก" คำตอบทั่วไปที่ฉันเคยได้ยินคือต้องการhrefคุณสมบัติดังนั้นจึงควรมีอยู่ในจุดยึด นี่คือ FALSE! hrefคุณสมบัติจะต้องเฉพาะสำหรับผู้ประกาศข่าวจะจริงจะเชื่อมโยงหลายมิติ! อ่านจาก w3. ดังนั้นทำไมไม่เพียงปล่อยทิ้งไว้ให้ผู้ที่สำรองไว้? เบราว์เซอร์แสดงสไตล์เริ่มต้นสำหรับองค์ประกอบและจะเปลี่ยนสไตล์เริ่มต้นของแท็กจุดยึดที่ไม่มีคุณสมบัติ href แต่จะถือว่าเป็นข้อความธรรมดาแทน มันยังเปลี่ยนพฤติกรรมของเบราว์เซอร์ที่เกี่ยวข้องกับองค์ประกอบ แถบสถานะ (ด้านล่างของหน้าจอ) จะไม่ปรากฏเมื่อวางเมาส์บนสมอโดยไม่มีคุณสมบัติ href วิธีที่ดีที่สุดคือใช้ค่าตัวยึดตำแหน่ง href บนสมอเพื่อให้แน่ใจว่าได้รับการปฏิบัติเหมือนเป็นการเชื่อมโยงหลายมิติ

ดูการสาธิตนี้แสดงให้เห็นถึงสไตล์และพฤติกรรมที่แตกต่าง

การใส่สัญลักษณ์ "#" เป็น href สำหรับบางสิ่งนั้นหมายความว่ามันไม่ชี้ไปยัง URL อื่น แต่ควรใช้กับ id หรือแท็กชื่ออื่นในหน้าเดียวกัน ตัวอย่างเช่น:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

อย่างไรก็ตามหากไม่มี ID หรือชื่อก็จะไปที่ "ไม่มีที่ไหน"

นี่เป็นคำถามที่คล้ายกันอีกคำถามที่ถามถึงจุดยึด HTML ด้วย 'ชื่อ' หรือ 'id'?

มันคือลิงค์ที่เชื่อมโยงไปยังที่อื่น ๆ (โดยเพิ่ม "#" ลงใน URL) มันถูกใช้ด้วยเหตุผลหลายประการ ตัวอย่างเช่นหากคุณใช้ JavaScript / jQuery บางประเภทและไม่ต้องการให้ HTML จริงเชื่อมโยงกับที่อื่น

นอกจากนี้ยังใช้สำหรับจุดยึดของหน้าซึ่งใช้เพื่อเปลี่ยนเส้นทางไปยังส่วนอื่นของหน้า

น่าเสียดายที่การใช้งานทั่วไปส่วนใหญ่<a href="#">คือโดยโปรแกรมเมอร์ที่ขี้เกียจที่ต้องการองค์ประกอบที่ไม่ใช้ไฮเปอร์ลิงก์แบบ JavaScript ซึ่งมีพฤติกรรมเหมือนเบรก แต่ไม่สามารถที่จะเพิ่มcursor: pointer;หรือ:hoverสไตล์ให้กับคลาสสำหรับองค์ประกอบที่ไม่ใช่ไฮเปอร์ลิงก์ได้ ขี้เกียจเกินไปที่จะตั้งไปhrefjavascript:void(0);

ปัญหานี้เป็นที่หนึ่ง<a href="#" onclick="some_function();">หรืออีกอย่างหลีกเลี่ยงไม่จบลงด้วยข้อผิดพลาดจาวาสคริปต์และยึดกับข้อผิดพลาดจาวาสคริปต์ onclick hrefมักจบลงด้วยการต่อไปของมัน ปกติแล้วสิ่งนี้จะกลายเป็นการกระโดดที่น่ารำคาญไปยังด้านบนของหน้า แต่ในกรณีของไซต์ที่ใช้<base>งาน<a href="#">จะได้รับการจัดการเป็น<a href="[base href]/#">ผลให้เกิดการนำทางที่ไม่คาดคิด หากมีข้อผิดพลาดในการบันทึกที่สร้างขึ้นคุณจะไม่เห็นข้อผิดพลาดเหล่านั้นในกรณีหลังเว้นแต่คุณจะเปิดใช้งานบันทึกถาวร

หากมีการใช้องค์ประกอบสมอเป็นที่ไม่ยึดเหนี่ยวมันควรจะมีhrefชุดของมันเพื่อjavascript:void(0);การย่อยสลายที่สง่างาม

<a href="#">ฉันเพียงแค่สูญเสียสองวันแก้จุดบกพร่องการเปลี่ยนเส้นทางหน้าแบบสุ่มที่ไม่คาดคิดว่าควรจะได้รับการฟื้นฟูเพียงหน้าและในที่สุดก็ติดตามมันลงไปฟังก์ชั่นการเพิ่มเหตุการณ์คลิกของ แทนที่#ด้วยการjavascript:void(0);แก้ไขมัน

<a href="#">สิ่งแรกที่ผมทำวันจันทร์กวาดล้างโครงการทุกกรณีของ

รายการที่ไม่เรียงลำดับมักจะถูกสร้างขึ้นโดยมีจุดประสงค์เพื่อใช้เป็นเมนู แต่liรายการเป็นข้อความ เนื่องจากliรายการเป็นข้อความตัวชี้เมาส์จะไม่เป็นลูกศร แต่เป็น "ฉันเคอร์เซอร์" ผู้ใช้คุ้นเคยกับการเห็นนิ้วชี้สำหรับตัวชี้เมาส์เมื่อมีบางสิ่งที่สามารถคลิกได้ การใช้แท็กจุดยึดaภายในliแท็กทำให้ตัวชี้เมาส์เปลี่ยนเป็นนิ้วชี้ นิ้วชี้ดีกว่าการใช้รายการเป็นเมนู

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

หากมีการใช้รายการสำหรับเมนูและไม่จำเป็นต้องมีลิงก์ก็ไม่จำเป็นต้องกำหนด URL แต่ปัญหาคือถ้าคุณไม่ใช้แอhrefททริบิวข้อความใน<a>แท็กจะถูกมองว่าเป็นข้อความดังนั้นตัวชี้เมาส์จะกลับไปเป็นเคอร์เซอร์ I เคอร์เซอร์ I อาจทำให้ผู้ใช้คิดว่ารายการเมนูนั้นไม่สามารถคลิกได้ ดังนั้นคุณยังต้องมีhrefแต่คุณไม่ต้องการลิงก์ไปยังที่ใดก็ได้

คุณสามารถใช้จำนวนมากdivหรือpแท็กสำหรับรายการเมนู แต่ตัวชี้เมาส์จะเป็น I-cursor สำหรับพวกเขาด้วย

คุณสามารถใช้ปุ่มจำนวนมากที่ซ้อนกันอยู่ด้านบนของรายการเมนู แต่ดูเหมือนว่ารายการจะดีกว่า และนั่นอาจเป็นสาเหตุhref="#"ที่มีการใช้ชี้ไปที่ใดในสมอแท็กด้านในของแท็กรายการ

คุณสามารถกำหนดลักษณะของตัวชี้ใน CSS เพื่อให้เป็นอีกหนึ่งตัวเลือก href="#"ที่ไหนก็อาจจะมีวิธีที่ขี้เกียจที่จะกำหนดจัดแต่งทรงผมบาง

ปัญหาในการใช้ href = "#" สำหรับลิงค์ว่างเปล่าคือมันจะพาคุณไปยังด้านบนของหน้าซึ่งอาจเป็นการกระทำที่ไม่ต้องการ เพื่อหลีกเลี่ยงปัญหานี้ให้ใช้เบราว์เซอร์รุ่นเก่าหรือรุ่นที่ไม่ใช่ HTML5

<a href="javascript:void(0)">Goes Nowhere</a>

เท่าที่ฉันรู้มันมักจะเป็นตัวยึดตำแหน่งสำหรับลิงก์ที่มี JavaScript บางส่วนติดอยู่ จุดหลักของการเชื่อมโยงให้บริการโดยรันโค้ด JavaScript; เบราว์เซอร์ที่มีการสนับสนุน JS จากนั้นเพิกเฉยต่อเป้าหมายลิงก์จริง หากเบราว์เซอร์ไม่รองรับ JS เครื่องหมายแฮชจะเปลี่ยนลิงก์ไปเป็นไม่ใช้ ดูยังไม่สร้างความรำคาญ JavaScript

ตามที่บางคำตอบอื่น ๆ ได้ชี้ให้เห็นaองค์ประกอบต้องมีhrefคุณลักษณะและ#ใช้เป็นตัวยึดตำแหน่ง แต่ก็ยังเป็นสิ่งประดิษฐ์ทางประวัติศาสตร์

จากMozilla Developer Network :

href

นี่เป็นคุณลักษณะที่จำเป็นเพียงอย่างเดียวสำหรับแองเคอร์ที่กำหนดลิงค์แหล่งที่มาของไฮเปอร์เท็กซ์ แต่ไม่ต้องการใน HTML5 อีกต่อไป การไม่ใช้แอตทริบิวต์นี้จะสร้างลิงค์ตัวยึดตำแหน่ง แอตทริบิวต์ href ระบุเป้าหมายของลิงค์ไม่ว่าจะเป็น URL หรือส่วนของ URL แฟรกเมนต์ URL เป็นชื่อที่นำหน้าด้วยเครื่องหมายแฮช (#) ซึ่งระบุตำแหน่งเป้าหมายภายใน (ID) ภายในเอกสารปัจจุบัน

นอกจากนี้ต่อ HTML5 ข้อมูลจำเพาะ :

หากองค์ประกอบไม่มีแอตทริบิวต์ href แสดงว่าองค์ประกอบนั้นเป็นตัวยึดตำแหน่งที่ลิงก์อาจถูกวางไว้หากมีความเกี่ยวข้องซึ่งประกอบด้วยเพียงเนื้อหาขององค์ประกอบ

แอตทริบิวต์ href กำหนด URL ของทรัพยากรของลิงค์ หากแท็กจุดยึดไม่มีแท็ก href แท็กจุดยึดจะไม่กลายเป็นไฮเปอร์ลิงก์ แอตทริบิวต์ href มีค่าต่อไปนี้:

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>