如果稍后要启用锚点,则删除 href 或将其设置为“#”会很痛苦,因为您需要将 href 重置为它应该链接到的任何值。相反,我只是向标签添加了一个禁用属性,并添加了一个单击事件处理程序和一些 css。这样可以很容易地看到锚被禁用,但如果启用它会去哪里。
是的,锚选项卡不支持 disabled 属性,但 CSS 属性选择器确实找到了它,jQuery 也是如此。因此,虽然下面的解决方案是混合的 jQuery/javaScipt/CSS,但它确实提供了一种更好的方法来禁用/启用锚点,它支持使用 javaScript 向标签动态添加/删除禁用属性。请注意,这仅经过测试并发现可以在 Chrome 中使用。
<style>
a:disabled, /* This doesn't do anything, but hopefully one day ... */
a[disabled] /* This activates when the disabled attribute is added. */
{
cursor: not-allowed; /* Indicate that the link is not to be click! */
}
</style>
<script>
// Use the same css selectors to find all of the disabled anchors ...
$( 'a:disabled, a[disabled]' )
.click( function( event ) {
//
// Prevent disabled anchors from doing their click action ...
//
// Need to recheck that the anchor is still disabled, because the
// jQuery that initially found this anchor and set this event
// handler doesn't affect the anchor after the event is set.
//
// Is this anchor still disabled?
if( this.hasAttribute( 'disabled' ) ) {
event.preventDefault();
}
} );
</script>
这是一个 codePen 演示:
https ://codepen.io/howardb1/pen/XWrEKzP