```js // タブの切り替え let tabs = $(".tab01, .tab02"); let sortTabs = $('.occupationList.listsearch.cat-a, .occupationList.listsearch.cat-b'); tabs.on("click", function() { let index = tabs.index(this); tabs.removeClass("tabactive"); tabs.eq(index).addClass("tabactive"); sortTabs.hide() sortTabs.eq(index).show(); }); // ソートしたコンテンツを数える let sortButtons = document.querySelectorAll('.occupationList.listsearch.cat-a li, .occupationList.listsearch.cat-b li'); let sortContentsCounter = function() { let isShow = 0; let sortContents = document.querySelectorAll('.tabContent .list.clearfix li'); for (let i = 0; i < sortContents.length; i++) { if (sortContents[i].style.display === "" || sortContents[i].style.display === "list-item") { isShow++; } } document.getElementById("sortNumber").textContent = isShow; } sortContentsCounter(); for (let i = 0; i < sortButtons.length; i++) { sortButtons[i].addEventListener("click", function() { // ソート処理がおわってからでないとかぞえられないので、settimeoutで少し遅らせている setTimeout(function() { sortContentsCounter(); }, 50); }); } ``` ## htmlにかく - a - b ```js <script type="text/javascript"> $(document).ready(function () { //initialize swiper when document ready var mySwiper = new Swiper ('.swiper-container', { // Optional parameters slidesPerView: 2, spaceBetween: 50, centeredSlides : true, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', }, autoplay: true, loop: true, breakpoints:{ 767:{ slidesPerView: 1, spaceBetween:0 } } }) }); </script> <link rel="stylesheet" type="text/css" href="../../MD/css/swiper.min.css"> ``` ```htmlmixed= <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> ``` ```html <div class="inner"> <div class="count"> <span id="sortNumber"></span>件 </div> <div class="tabContent"> <ul class="occupationList listsearch cat-a clearfix"> <li id="cat-a01" class="over_btn">小売・EC</li> <li id="cat-a02" class="over_btn">IT・通信</li> <li id="cat-a03" class="over_btn">人材</li> <li id="cat-a04" class="over_btn">サービス</li> ```