とりあえずリンクは設置するけれど、
期日が来るまでリンクを無効にしたいときのための
良い方法がありました。
CSSの「pointer-events」で設定
HTML
1 |
<a class="nolink" tabindex="-1" href="#">リンクしないよ</a> |
CSS
1 2 3 |
.nolink{ pointer-events: none; } |
プレビュー
たったこれだけ。なんて簡単!
わざわざdivタグで擬似ボタンつくったり、href属性をコメントアウトしたりしなくてもいーんだ!!
「tabindex」属性ってなんだ?
ところで、HTMLに記述したtabindex
属性とは何でしょうか?
名前を見る限りどうやら、Tabキーに関わる属性、、?
tabindex=""
とは、Tabキーを押したときにフォーカスが移動する順序を指定する属性です。
aタグに限らず、入力フォーカスを持つ要素に対して使えます。
なお、tabindex
に正の値を設定することは推奨されていません。
今回の場合のtabindex
の役割は、
Tabキーを使った際にフォーカスが当たらないようにするためでした。
以上、カンタンにリンクを無効にできる方法でした!
コメント