スキルアップを始める

【JavaScript】li要素全体をクリックしてリンク先にジャンプさせる

JavaScript(ジャバスクリプト)
メルマガ購読できます

簡単1ステップ!届いたメールの「フォローを確認」クリックでメルマガ登録!一緒にスキルアップを目指しましょう!

57人の購読者に加わりましょう

li要素全体をクリックしてリンクしたい

例えば下記のようなHTMLリスト(目次)があったとして、このli要素はリンクにならず、a要素がリンクとなります。

<div class="toc-content">
    <ol class="toc-list open">
        <li><a href="#toc1" tabindex="0">セクション1</a></li>
        <li><a href="#toc2" tabindex="0">セクション2</a></li>
        <li><a href="#toc3" tabindex="0">セクション3</a></li>
        <li><a href="#toc4" tabindex="0">セクション4</a></li>
        <li><a href="#toc5" tabindex="0">セクション5</a></li>
    </ol>
</div>

この場合、文字が表示されていない部分が、クリックしても反応しません。

li要素全体をクリックしてリンクできるようにするには…?

addEventListenerを使う

このコードでは、目次(TOC)の項目をクリックすると、その項目に対応する場所にスクロールするようになっています。

const tocList = document.querySelector(".toc-list");

tocList.querySelectorAll("li").forEach((item) => {
  const link = item.querySelector("a");

  item.addEventListener("click", () => {
    window.location.href = link.getAttribute("href");
  });
});

このコードは、目次のリストを取得し、それぞれのリストアイテム(li要素)に対して、その子要素のa要素のhref属性を取得して、li要素自体にhref属性を設定しています。

これにより、li要素全体がリンクとしてクリック可能になります。

[rml_read_more]

また、querySelectorAllを使用して、すべてのli要素を取得し、forEachループを使用して各li要素に対して処理を行います。

li要素の中身を空にし、新しいa要素を作成して、リンクのURLを設定し、テキストを設定しています。最後に、新しいa要素をli要素に追加しています。

これで、li部分をクリックした場合でも、子要素のリンクが動いて、クリックして移動できるようになります。

ただし、このままだと、a要素の範囲外が指のアイコンにならないので、調整してみます。

cursor: pointer;

li要素にcursor: pointer;を追加します。

「cursor: pointer;」とは、CSSで使用するプロパティの1つで、マウスカーソルをポインター(指さし手)に変えることができる設定です。

これにより、通常のテキストや画像以外の要素(ボタン、リンク、アイコンなど)をクリック可能な要素であることを示すことができます。

カーソルのスタイルを指定することで、ユーザーに対して要素がクリックできるかどうかを視覚的に伝えることができます。

まとめ

addEventListenerやquerySelectorを駆使してDOM操作できました!

色々とできますね!

会員登録するとご利用できます。
Kindle Unlimited 会員は無料で購読できます
購読はこちら
Kindle Unlimited 会員は無料で購読できます
購読はこちら