```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>
```