วิธีการทำแท็กสมอหมายถึงอะไร

ฉันใช้ jQuery ฉันต้องทำให้แท็กจุดยึดไม่ทำงาน

ฉันมักจะเขียนแบบนี้:

<a href="#">link</a>

อย่างไรก็ตามนี่หมายถึงด้านบนของหน้า!

หากคุณไม่ต้องการให้มันชี้ไปที่สิ่งใดคุณอาจไม่ควรใช้<a>แท็ก (สมอ)

หากคุณต้องการบางสิ่งให้ดูเหมือนลิงค์ แต่ไม่ทำหน้าที่เหมือนลิงก์คุณควรใช้องค์ประกอบที่เหมาะสม (เช่น<span>) จากนั้นกำหนดสไตล์โดยใช้ CSS:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

นอกจากนี้เมื่อคุณติดแท็กคำถามนี้ "jQuery" ฉันถือว่าคุณต้องการแนบตัวจัดการเหตุการณ์คลิก ถ้าเป็นเช่นนั้นเพียงทำสิ่งเดียวกับข้างบนแล้วใช้สิ่งที่ชอบ JavaScript ต่อไปนี้:

$('#fake-link-1').click(function() {
    /* put your code here */
});

มีน้อยกว่าโซลูชั่นที่สมบูรณ์แบบ:

1. ลิงก์ไปที่สมอเรือปลอม

<a href="#">

ปัญหา: คลิกที่ลิงค์กระโดดกลับไปที่ด้านบนของหน้า

2. ใช้แท็กอื่นที่ไม่ใช่ 'a'

ใช้แท็ก span และใช้ jquery เพื่อจัดการการคลิก

ปัญหา: หยุดการนำทางคีย์บอร์ดต้องเปลี่ยนเคอร์เซอร์โฮเวอร์ด้วยตนเอง

3. เชื่อมโยงไปยังฟังก์ชั่นโมฆะ javascript

<a href="javascript:void(0);">
<a href="javascript:;">

ปัญหา: หยุดพักเมื่อเชื่อมโยงรูปภาพใน IE

สารละลาย

เนื่องจากสิ่งเหล่านี้ล้วนแล้วแต่มีปัญหาวิธีแก้ปัญหาที่ฉันตัดสินคือการเชื่อมโยงไปยังจุดยึดปลอมแล้วคืนค่าเท็จจากเมธอด onClick:

<a href="#" onClick="return false;">

ไม่ใช่วิธีแก้ปัญหาที่กระชับที่สุด แต่มันแก้ปัญหาทั้งหมดด้วยวิธีการข้างต้น

ในการทำให้มันไม่ทำอะไรเลยให้ใช้สิ่งนี้:

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

วิธีที่ถูกต้องในการจัดการสิ่งนี้คือ "ทำลาย" ลิงก์ด้วย jQuery เมื่อคุณจัดการลิงก์

HTML

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

การเรียกสองครั้งสุดท้ายนั้นหยุดเบราว์เซอร์ตีความการคลิก

มีหลายวิธีที่จะทำเช่นนั้น

อย่าเพิ่มและhrefคุณสมบัติ

<a name="here"> Test <a>

คุณสามารถเพิ่มเหตุการณ์ onclick แทน href like

<a name="here" onclick="YourFunction()"> Test <a>

หรือคุณสามารถเพิ่มฟังก์ชัน void เช่นนี้ซึ่งจะเป็นวิธีที่ดีที่สุด

<a href="javascript:void(0);"> 
<a href="javascript:;">

คุณหมายถึงอะไรโดยเปล่าประโยชน์?

<a href='about:blank'>blank page</a>

หรือ

<a href='whatever' onclick='return false;'>won't navigate</a>

ฉันคิดว่าคุณสามารถลอง

<a href="JavaScript:void(0)">link</a>

สิ่งเดียวที่ฉันเห็นที่นี่คือการรักษาความปลอดภัยเบราว์เซอร์ระดับสูงอาจแจ้งให้ดำเนินการจาวาสคริปต์

แม้ว่านี่จะเป็นวิธีที่ง่ายกว่า

<a href="#" onclick="return false;">Link</a>

ควรใช้เท่าที่จำเป็น

อ่านบทความนี้สำหรับพอยน์เตอร์บางตัวhttps://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

คำตอบนี้ควรได้รับการอัปเดตเพื่อแสดงถึงมาตรฐานเว็บใหม่ (HTML5)

นี้:

<a tabindex="0">This represents a placeholder hyperlink</a>

... เป็น HTML5 ที่ถูกต้อง คุณลักษณะ tabindex ทำให้แป้นพิมพ์สามารถโฟกัสได้เหมือนไฮเปอร์ลิงก์ปกติ คุณอาจใช้spanองค์ประกอบสำหรับสิ่งนี้ตามที่กล่าวไว้ก่อนหน้านี้ แต่ฉันพบว่าการใช้aองค์ประกอบนั้นดูดีกว่า

ดู: https://w3c.github.io/html-reference/a.html
และ: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

ต่อไปนี้เป็นสามวิธีสำหรับคุณสมบัติแท็ก<a>ของhrefแท็กที่อ้างถึงสิ่งใด

<a href="JavaScript:void(0)"> link </a>

<a href="javascript:;">link</a >

<a href="#" onclick="return false;"> Link </a>

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันคิดว่าฉันจะเพิ่มสองเซ็นต์ของฉัน:

ขึ้นอยู่กับว่าลิงก์กำลังทำอะไร แต่โดยปกติฉันจะชี้ลิงค์ไปยัง url ที่อาจแสดง / ทำสิ่งเดียวกันตัวอย่างเช่นหากคุณทำกล่องป๊อปอัปเล็กน้อย:

<a id="about" href="/about">About</a>

จากนั้นด้วย jQuery

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

ด้วยวิธีนี้เบราว์เซอร์ที่เก่ามาก (หรือเบราว์เซอร์ที่ปิดใช้งาน JavaScript) ยังคงสามารถนำทางไปยังหน้าเว็บที่แยกจากกันได้ แต่ที่สำคัญกว่านั้น Google จะเลือกและรวบรวมข้อมูลเนื้อหาของหน้าเกี่ยวกับ

ตรวจสอบให้แน่ใจว่าลิงก์ทั้งหมดของคุณที่คุณต้องการหยุดมีhref="#!"(หรืออะไรก็ได้ที่คุณต้องการจริงๆ) จากนั้นใช้สิ่งนี้:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

คุณสามารถมีสมอ HTML ( aแท็ก) โดยไม่มีhrefแอตทริบิวต์ ออกจากhrefแอตทริบิวต์ & จะไม่เชื่อมโยงกับสิ่งใด:

<a>link</a>

สิ่งเดียวที่ได้ผลสำหรับฉันคือการรวมกันของข้างต้น:

ก่อนอื่น li ใน ul

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

จากนั้นใน LoadTab2_1 ฉันสลับแท็บด้วยตนเอง

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

นี่เป็นเพราะการตัดการเชื่อมต่อของยังตัดการเชื่อมต่อการกระทำในแท็บ

คุณต้องกำหนดสไตล์ของแท็บด้วยตนเองเมื่อแท็บหลักเปลี่ยนสิ่งต่างๆ

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

คุณสามารถทำได้โดย

<a style='cursor:pointer' >Link</a>

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

นี่คือแท็กสมอของฉัน ดังนั้นกลับเท็จในเหตุการณ์ onClick = "" ไม่เป็นประโยชน์ที่นี่ ฉันเพิ่งลบ href = "#" คุณสมบัติและมันใช้ได้กับฉันเหมือนด้านล่าง

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

และฉันต้องการเพิ่ม css นี้

.SomeClass
{
    cursor: pointer;
}

ฉันพบปัญหานี้ในไซต์ WordPress ส่วนหัวของเมนูแบบเลื่อนลงมีแอตทริบิวต์href=""และปลั๊กอินส่วนหัวที่ใช้เฉพาะ URL มาตรฐานที่อนุญาตเท่านั้น ทางออกที่ง่ายที่สุดมีเพียงการเรียกใช้รหัสนี้ในส่วนท้าย:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

สิ่งนี้จะป้องกันจุดยึดที่ว่างเปล่าไม่ให้ทำอะไรเลย

ตอบสนองไม่สนับสนุนการใช้ฟังก์ชันเช่นนี้href="javascript:void(0)"ในแท็ก anchor ของคุณอีกต่อไปแต่นี่เป็นสิ่งที่ใช้ได้ดี

<a href="#" onClick={() => null} >link</a>

ฉันรู้ว่านี่ถูกติดแท็กเป็นคำถาม jQuery แต่คุณสามารถตอบคำถามนี้ด้วย AngularJS เช่นกัน

ในองค์ประกอบของคุณเพิ่มคำสั่ง ng-click และใช้ตัวแปร $ event ซึ่งเป็นเหตุการณ์คลิก ... ป้องกันพฤติกรรมเริ่มต้น:

<a href="#" ng-click="$event.preventDefault()">

คุณสามารถส่งผ่านตัวแปร $ event ไปยังฟังก์ชันได้:

<a href="#" ng-click="doSomething($event)">

ในฟังก์ชั่นนั้นคุณทำสิ่งที่คุณต้องการด้วยการคลิกเหตุการณ์