Bir tutturucu etiketi hiçbir şeye işaret etmemek için nasıl?

Ben jQuery kullanın, bazı çapa etiketleri hiçbir eylem yapmak yapmak gerekir.

Genellikle böyle yazıyorum:

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

Ancak bu sayfanın üst kısmına işaret eder!

Herhangi bir şeye işaret etmesini istemiyorsanız, büyük olasılıkla <a>(çapa) etiketini kullanmamalısınız.

Bir şeyin bağlantı gibi görünmesini ancak bağlantı gibi davranmamasını istiyorsanız, uygun öğeyi (örneğin <span>) kullanmak ve sonra CSS kullanarak stil vermek en iyisidir :

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

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

Ayrıca, bu soruyu "jQuery" olarak etiketlediğiniz göz önüne alındığında, bir tıklama olayı işleyicisi eklemek istediğinizi varsayıyorum. Öyleyse, yukarıdakiyle aynı şeyi yapın ve ardından aşağıdaki JavaScript gibi bir şey kullanın:

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

Mükemmel çözümlerden birkaç tane daha az var:

1. Sahte bir çapa bağlantısı

<a href="#">

Sorun: Bağlantıyı tıklamak sayfanın üst kısmına geri dönüyor

2. 'a' dışında bir etiket kullanma

Bir yayılma etiketi kullanın ve tıklamayı işlemek için jquery kullanın

Sorun: Klavye gezinmesini kırıyor, fareyle üzerine gelme imlecini manuel olarak değiştirmek zorunda

3. Javascript geçersiz işlevine bağlantı

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

Sorun: IE'de görüntüler bağlanırken kesiliyor

Çözüm

Bunların hepsinin sorunları olduğu için, çözdüğüm çözüm sahte bir bağlantıya bağlamak ve onClick yönteminden false döndürmektir:

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

En özlü çözümler değil, ancak yukarıdaki yöntemlerle tüm sorunları çözer.

Hiçbir şey yapmamasını sağlamak için şunu kullanın:

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

Bunu işlemenin doğru yolu, bağlantıyı işlediğinizde bağlantıyı jQuery ile "kırmak "tır

HTML

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

JS

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

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

Bu son iki arama, tıklamayı yorumlamayı tarayıcıyı durdurur.

Bunu yapmanın pek çok yolu var

Ekleme ve hrefilişkilendirme

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

Href like yerine onclick olayı ekleyebilirsiniz

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

Veya bunun gibi en iyi yol olan geçersiz işlev ekleyebilirsiniz.

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

Hiçbir şeyle ne demek istiyorsun?

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

veya

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

Bence deneyebilirsin

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

Burada gördüğüm tek yakalama, üst düzey tarayıcı güvenliği javascript yürütme isteyebilir.

Bu daha kolay bir yol olsa da

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

bu az miktarda kullanılmalıdır

Bazı işaretçiler için bu makaleyi okuyun https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Bu yanıt yeni web standartlarını (HTML5) yansıtacak şekilde güncellenmelidir.

Bu:

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

... geçerli bir HTML5. Tabindex özelliği, klavyeyi normal köprüler gibi odaklanabilir hale getirir. Bunun için spanelemanı daha önce de belirtildiği gibi kullanabilirsiniz , ancak aelemanı daha zarif buluyorum .

Bkz. Https://w3c.github.io/html-reference/a.html
ve: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href

<a>Etiketin hreftag özelliğinin hiçbir şeye başvurmamasının üç yolu şunlardır :

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

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

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

Bunun eski bir soru olduğunu biliyorum, ama yine de iki sentimi ekleyeceğimi düşündüm:

Bağlantının ne yapacağına bağlıdır, ancak genellikle, aynı şeyi görüntüleyebilecek / yapacak olabilecek bir url'ye bağlantıyı işaret ederdim, örneğin, kutu açılır hakkında biraz yapıyorsanız:

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

Sonra jQuery ile

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

Bu şekilde, çok eski tarayıcılar (veya JavaScript devre dışı bırakılmış tarayıcılar) ayrı bir sayfaya gidebilir, ancak daha da önemlisi, Google bunu da alır ve yaklaşık sayfanın içeriğini tarar.

Durdurmak istediğiniz tüm bağlantılarınızın href="#!"(veya gerçekten istediğiniz herhangi bir şeyin) olduğundan emin olun ve ardından bunu kullanın:

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

Özniteliği aolmayan bir HTML bağlantısına ( etiketi) sahip olabilirsiniz href. hrefÖzelliği bırakın ve hiçbir şeye bağlanmaz:

<a>link</a>

Benim için işe yarayan tek şey yukarıdakilerin bir kombinasyonuydu:

İlk önce ul

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

Sonra LoadTab2_1'de sekme div'lerini manuel olarak değiştirdim

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

Bunun nedeni, bağlantısının kesilmesinin sekmelerdeki eylemin bağlantısını kesmesidir

Birincil sekme bir şeyleri değiştirdiğinde sekme stilini de manuel olarak yapmanız gerekir

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

Tarafından yapabilirsiniz

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

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

bu benim çapa etiketimdi. bu nedenle onClick = "" olayının false değerini döndürmek burada yararlı değildir. Ben sadece href = "#" özelliğini kaldırdım ve aşağıdaki gibi benim için çalıştı

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

ve bu css eklemek gerekiyordu.

.SomeClass
{
    cursor: pointer;
}

Bir WordPress sitesinde bu sorunla karşılaştım. Açılır menülerdeki üstbilgiler her zaman özelliğe sahipti href=""ve kullanılan üstbilgi eklentisi yalnızca standart URL'lere izin verdi. En kolay çözüm, bu kodu altbilgide çalıştırmaktı:

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

Bu, boş çapaların herhangi bir şey yapmasını önleyecektir.

Reaksiyon artık href="javascript:void(0)"bağlantı etiketinizde böyle bir işlevi kullanmayı desteklemiyor , ancak işte oldukça iyi çalışan bir şey var.

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

Bunun jQuery sorusu olarak etiketlendiğini biliyorum, ancak bunu AngularJS ile de cevaplayabilirsiniz.

öğenize ng-click yönergesini ekleyin ve click event olan $ event değişkenini kullanın ... varsayılan davranışını önleyin:

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

$ Event değişkenini bir işleve bile aktarabilirsiniz:

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

bu işlevde, tıklama etkinliğiyle ne istersen yaparsın.