Aタグのクリックイベント

Question

ページャー機能を自作しているのですが、AタグのonClickイベントをキャッチする方法を調べています。
調べているうちにAタグを囲っているdivタグにonClickイベントをつけた方が良いと書いているサイトを見つけました。

<div class="pagination" onclick= MouseClick()>
    <ul class="pagination">
        <li> <a href="#">＜＜</a></li>
        <li> <a href="#">＜</a></li>
        <li> <a href="#">１</a></li>
        <li> <a href="#">２</a></li>
        <li> <a href="#">３</a></li>
        <li> <a href="#">４</a></li>
        <li> <a href="#">５</a></li>
        <li> <a href="#">＞</a></li>
        <li> <a href="#">＞＞</a></li>
    </ul>
</div>

上記の書き方で合っているでしょうか？
この場合、どのAタグがクリックされたかわかるのでしょうか？
divタグにonclickをつけるのはAタグが１つの時の話になるのでしょうか？

あとクリックをされた時にAタグの数値を変更する方法とクリックされたAタグに「class="active"」を追加したいのですが、方法がわかりません。
聞いてばかりで申し訳ないですが、教えてもらえないでしょうか？

Comments

[m.ts10806]

htmlしか提示されていないので総合的には判断できません。JavaScriptもご提示ください。　>上記の書き方で合っているでしょうか？

[limitman80]

js側は書き方がわからず書いておりません。

[m.ts10806]

ふーむ。参考にした記事があるようですし、そちらを真似してとりあえず思うように書いてみることを強くススメます。調べ方が分からないのであれば質問の方向性を調べ方に転換したほうが質問者さんにとっては良いかと思います。

[limitman80]

参考にしたサイトはデザイン部分しか書かれておらず、JSはやったことのないのでこちらで質問しました。もう少し勉強します。

Answer 1

まずアンカーをクリックするということはリンクに飛ぶということを把握してください
飛びながらアクティブにするということでよいのですね？
その上でアクティブは排他的でなくてよいのでしょうか？
（あるアンカーがアクティブなら他のアンカーは非アクティブでなくていよい？）

簡単な例だとこう

<style>
.active{color:red;}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(){
  [].forEach.call(document.querySelectorAll('ul.pagination a'),function(x){
    x.addEventListener('click',function(e){
      e.preventDefault();
      var t=e.target;
      t.classList.toggle('active');
    });
  });
});
</script>

<div class="pagination">
    <ul class="pagination">
        <li> <a href="#">＜＜</a></li>
        <li> <a href="#">＜</a></li>
        <li> <a href="#">１</a></li>
        <li> <a href="#">２</a></li>
        <li> <a href="#">３</a></li>
        <li> <a href="#">４</a></li>
        <li> <a href="#">５</a></li>
        <li> <a href="#">＞</a></li>
        <li> <a href="#">＞＞</a></li>
    </ul>
</div>

他を非アクティブ化

window.addEventListener('DOMContentLoaded', function(){
  [].forEach.call(document.querySelectorAll('ul.pagination a'),function(x){
    x.addEventListener('click',function(e){
      e.preventDefault();
      var t=e.target;
      if(active=document.querySelector('ul.pagination a.active')){
        active.classList.remove('active');
      }
      t.classList.add('active');
    });
  });
});

Comments

[limitman80]

早速の回答ありがとうございます。
確かにアクティブにしたら他のアンカーは非アクティブにする必要がありますね。
そちらも教えてもらえると助かります。

[yambejp]

追記しておきました

Answer 2

アンカーなら a:active {} で済むわけで、もしかしたらアンカーではないのではないかと思いました。

<div class="pagination" onchange="return MouseClick(event);">
    <ul class="pagination">
        <li><input type="radio" name="page" value="pagestart" id="pagestart" /><label for="pagestart">＜＜</label></li>
        <li><input type="radio" name="page" value="pageprev" id="pageprev" /><label for="pageprev">＜</label></li>
        <li><input type="radio" name="page" value="page1" id="page1" /><label for="page1">１</label></li>
        <li><input type="radio" name="page" value="page2" id="page2" /><label for="page2">２</label></li>
        <li><input type="radio" name="page" value="page3" id="page3" /><label for="page3">３</label></li>
        <li><input type="radio" name="page" value="page4" id="page4" /><label for="page4">４</label></li>
        <li><input type="radio" name="page" value="page5" id="page5" /><label for="page5">５</label></li>
        <li><input type="radio" name="page" value="pagenext" id="pagenext" /><label for="pagenext">＞</label></li>
        <li><input type="radio" name="page" value="pageend" id="pageend" /><label for="pageend">＞＞</label></li>
    </ul>
</div>

input[name="page"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

input[name="page"] + label {
  text-decoration: underline;
  color: #00f;
  cursor: pointer;
}

input[name="page"]:checked + label {
  background: #fcc;
}

function MouseClick(event) {
  console.log(event.target);
}