2

liHTML ドキュメントで、リスト項目の番号 ( ) または番号付きリストの箇条書き( )だけにクリック イベントを設定することはできますolか?

番号をクリックして、いくつかの処理を実行できるようにしたいと思います。これまでのところ、私は2つの考えを持っていましたが、通常の順序付きリストでそれを行う別の方法があることを望んでいました:

  1. CSS カウンターを使用して、数字があったはずの場所に配置する要素に数字を挿入します。
  2. 関連付けられたリスト項目内から数値の上に透明な要素を絶対配置します。

以下はリストのサンプルです。1.、2.、と表示されている部分をクリックできるようにしたい3.。

HTML ソース:

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

ブラウザでの結果:

1. First Item
2. Second Item
3. Third Item
4

2 に答える 2

2

@Fallexe の提案を適用しますが、JS にスパンを追加します。

[].slice.call (document.querySelectorAll ('ol, ul')).forEach (function (list) {
    for (var s, el = list.firstElementChild; el; el = el.nextElementSibling)
      el.innerHTML = '<span>' + el.innerHTML + '</span>';

    list.addEventListener ('click', function (ev) {
        if (ev.target.tagName !== 'SPAN')
          for (var el = this.firstElementChild; el; el = el.nextElementSibling)
              el.className = el === ev.target ? 'selected' : '';
    }, false);    
});

http://jsfiddle.net/jstoolsmith/6nxeT/でフィドルを参照してください。

于 2013-06-01T10:04:25.690 に答える