CSS kullanarak bir HTML bağlantı etiketini tıklanabilir / bağlanamaz hale getirmek mümkün müdür?

Örneğin şuna sahipsem:

<a style="" href="page.html">page link</a>

Style özelliği için kullanabileceğim, bağlantının tıklanabilir olmaması ve beni page.html'ye götürmemesini sağlayacak herhangi bir şey var mı?

Ya da tek seçeneğim, bir bağlantı etiketindeki 'sayfa bağlantısını' sarmamak mı?

Düzenleme: İnsanların daha iyi tavsiyelerde bulunabilmesi için bunu neden yapmak istediğimi belirtmek istiyorum. Uygulamamı, geliştiricinin ne tür gezinme stilini istediğini seçebilmesi için kurmaya çalışıyorum.

Bu yüzden, bir bağlantı listem var ve biri şu anda seçili ve diğerleri değil. Seçilmeyen bağlantılar için, bunların normal tıklanabilir bağlantı etiketleri olmasını istiyorum. Ancak seçilen bağlantı için, bazı kişiler bağlantının tıklanabilir kalmasını tercih ederken, diğerleri tıklanabilir olmamasını tercih eder.

Artık bir bağlantı etiketini seçili bağlantının çevresine programlı olarak kolayca sarmayabiliyordum. Ancak, seçili bağlantıyı her zaman aşağıdaki gibi bir şeye sarabilirsem daha şık olacağını düşünüyorum:

<a id="current" href="link.html">link</a>

ve sonra geliştiricinin bağlama stilini CSS aracılığıyla kontrol etmesine izin verin.

Bu css'i kullanabilirsiniz:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

Ve sonra sınıfı html kodunuza atayın:

<a style="" href="page.html" class="inactiveLink">page link</a>

Bağlantının tıklanabilir olmamasını ve imleç stilini bağlantıların sahip olduğu gibi bir eli değil, bir ok stilini yapar.

veya bu stili html'de kullanın:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

ama ilk yaklaşımı öneririm.

Bu, davranışsal bir dil olmadığı için (yani JavaScript) CSS ile yapmak çok kolay değildir, tek kolay yol, bağlantınızda bir JavaScript OnClick Olayı kullanmak ve onu yanlış olarak döndürmektir, bu muhtemelen en kısa koddur bunun için kullanabilirsiniz:

<a href="page.html" onclick="return false">page link</a>

Evet .. Mümkün kullanarak css

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

Veya hiçbir etkinlik içermeyen tamamen HTML ve CSS:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

CSS, davranışı değil sunumu etkilemek için tasarlanmıştır.

Biraz JavaScript kullanabilirsiniz.

document.links[0].onclick = function(event) {
   event.preventDefault();
};

Daha rahatsız edici olmayan bir yol (jQuery kullandığınızı varsayarak):

HTML:

<a id="my-link" href="page.html">page link</a>

JavaScript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

Bunun avantajı, mantık ve sunum arasındaki temiz ayrımdır. Bir gün bu bağlantının başka bir şey yapacağına karar verirseniz, işaretlemeyle uğraşmanız gerekmez, sadece JS ile.

Cevap:

<a href="page.html" onclick="return false">page link</a>

Css ile yapılabilir ve çok basittir. "a" yı "p" olarak değiştirin. Tıklanamaz hale getirmek istiyorsanız, "sayfa bağlantınız" zaten bir yere götürmez.

CSS'nize bu belirli "p" üzerinde fareyle üzerine gelme işlemi yapmasını söylediğinizde, şunu söyleyin:

(bu örnek için "p" ye "örnek" kimliğini verdim)

#example
{
  cursor:default;
}

Artık imleciniz sayfanın her yerinde olduğu gibi kalacaktır.

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>