https://www.cna.or.jp/front/cna/js/news.js

1//絞り込み
2var searchItem = '.search_item'; // 絞り込む項目を選択するエリア
3var listItem = '.list_item'; // 絞り込み対象のアイテム
4var hideClass = 'is-hide'; // 絞り込み対象外の場合に付与されるclass名
5var activeClass = 'is-active'; // 選択中のグループに付与されるclass名
6
7$(function () {
8	// 絞り込みを変更した時
9	$(searchItem).on('click', function () {
10		$(searchItem).removeClass(activeClass);
11		var group = $(this).addClass(activeClass).data('group');
12		var url = new URL(window.location.href);
13		if (url.pathname.indexOf('news') !== -1) {
14			url.searchParams.delete('page');
15			if (group === 'all') {
16				// Remove a specific query parameter
17				url.searchParams.delete('category');
18			} else {
19				// Add query parameter
20				url.searchParams.set('category', group);
21			}
22			// Update URL with the new query parameter
23			window.history.pushState({}, '', url);
24			location.reload();
25		} else {
26			search_filter(group);
27		}
28	});
29});
30
31/**
32 * リストの絞り込みを行う
33 * @param {String} group data属性の値
34 */
35function search_filter(group) {
36	// 非表示状態を解除
37	$(listItem).removeClass(hideClass);
38	// 値が空の場合はすべて表示
39	if (group === 'all') {
40		$('.newsList').removeClass(hideClass);
41		$('.newsListBasedOnCategoriesLimit').addClass(hideClass);
42		return;
43	}
44	$('.newsListBasedOnCategoriesLimit').removeClass(hideClass);
45	$('.newsList').addClass(hideClass);
46	// リスト内の各アイテムをチェック
47	for (var i = 0; i < $(listItem).length; i++) {
48		// アイテムに設定している項目を取得
49		var itemData = $(listItem).eq(i).data('group');
50		// 絞り込み対象かどうかを調べる
51		if (itemData !== group) {
52			$(listItem).eq(i).addClass(hideClass);
53		}
54	}
55}
56// JavaScript Document