https://security.nifty.com/posts/js/index.js

1/* ====================================================
2【post】
3==================================================== */
4// クリックしたカテゴリーの key を記憶する
5document.addEventListener('click', function (e) {
6  const target = e.target;
7  if (target.classList.contains('categoryBtn')) {
8    const catKey = target.getAttribute('data-category');
9
10    if (catKey) {
11      sessionStorage.setItem('catKey', catKey);
12    }
13  }
14});
15
16/* ====================================================
17【posts】
18==================================================== */
19document.addEventListener('DOMContentLoaded', function () {
20  const listItems = document.querySelectorAll('ul.secPostsCat > li');
21  const contentArticles = document.querySelectorAll('.js-tabTargetArticle');
22  const postCatKey = sessionStorage.getItem('catKey');
23
24  function changeDisplay(catData) {
25    listItems.forEach((cat) => cat.classList.toggle('is-current', cat.getAttribute('data-category') === catData));
26
27    contentArticles.forEach((art) => {
28      const artCategories = art.getAttribute('data-article').split(' ');
29      art.style.display = catData === 'all' || artCategories.includes(catData) ? 'block' : 'none';
30    });
31  }
32
33  //post でクリックされたカテゴリーと同じタブを選択状態にする
34  if (postCatKey) {
35    changeDisplay(postCatKey);
36    sessionStorage.removeItem('catKey');
37  }
38
39  //クリックされたタブにis-currentクラスを付与 同じカテゴリーの記事を表示
40  listItems.forEach((cat) => {
41    cat.addEventListener('click', function () {
42      changeDisplay(this.getAttribute('data-category') || 'all');
43    });
44  });
45});
46