---
# System prepended metadata

title: Untitled

---

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