dhtml - JavaScriptアクションに使用する理由はありますか?

Question

トリガーする Javascript アクションがある場合は常に、やみくもに<a href="#">, とonclickリスナーをアンカーに配置してきました。

<ul>
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
</ul>

<script>
    $('li a').click(function(e) {
        e.preventDefault();

        // ...
    });
</script>

しかし、私はそれを機械的に行っただけであり、これははるかにクリーンでシンプルであることに気付きました:

<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    <li>Tab 3</li>
</ul>

<script>
    $('li').click(function(e) {
        // ...
    });
</script>

2 番目のアプローチに欠点はありますか、それとも JavaScript アクションがURL に関連付けられていない場合に確実に進むべき道ですか?

注：私はこの同様の質問を読みましたが、投稿者はhref属性を削除することを求めていましたが、<a>.

Answer 1

アンカー タグを使用する 1 つの考えられる理由は、(障害またはハードウェア構成のために) マウスを使用できないユーザーにとってよりアクセスしやすいことだと思います。ユーザーがキーボードを使用して Web ページをタブ移動すると、ブラウザーはアンカーから次のアンカーにジャンプする傾向があり、JS イベント ハンドラーをアタッチしても li タグで停止しない場合があります。

Answer 2

がないhrefと、ハイパーリンクが通常提供するスタイルの一部が失われると思います。

Answer 3

コンテキストに応じて -- これが重要なフレーズです --

コンテキストに応じてa、リンクのようにスタイルを設定するという点で、要素を使用するものには利点があります。ユーザーがマウスオーバーすると、カーソルが自動的に変化します。さらに、コンテキストに応じて、href何か有用なものを指すことができます。JS を有効にしていない訪問者 (Google など) のフォールバックです。

見た目をクリックできるようにするために何かをしなければli、見過ごされる可能性があります。

Answer 4

2 番目の方法の主な欠点の 1 つは、ブラウザーで JavaScript を無効にしているユーザーがサイトにアクセスできないことです。もちろん、これらのユーザーがサイトにアクセスできない場合、それは有効な考慮事項ではありません。

それに加えて、要素を実際のリンクのように見せるために必要な CSS 作業がいくつかありliます。たとえば、実際のリンクcursor: pointerでは既にデフォルトになっている を使用する必要があります。

より抽象的なレベルでは、意味的に正しいマークアップという名目で、リンク (またはリンクのようなページ要素) をリンク (またはリンクのようなページ要素) のために特別に設計された HTML 要素で生成する方が賢明です。

結局、厳密に言えば、箇条書きのリストとタブベースのナビゲーションは意味的に同じではありません。