scss 170915【170831cssのみでタブ切り替え】実装

Posted 2021-05-17

<script>
$(function(){
	var $match = $('#tags').find('span');
	$w.superResize({
		resizeAfter : function() {
			matchHeight($match,(abi.pc) ? 4 : (abi.tab) ? 4 : 2);
		}
	});
});

// 以下の処理を定義した要素に実行
$(function() {
	// 「#tags」内の「span」がクリックされると以下の処理を実行
	$("#tags span").click(function() {
	// 変数「tags」を定義する
		var tags = $(this).attr('id');
			// クリックされたタブにのみ「.select」を与える
			$("#tags span").removeClass('select');
			$(this).addClass('select');
			// クリックされたタブに紐づいた要素を表示、それ以外を非表示にする
			$("#choice .box_news").fadeOut(500);
			if(tags == 'tab02') {
			$("#choice .tab02").fadeIn(500);
			} else if(tags == 'tab01') {
			$("#choice .tab01").fadeIn(500);
			} else if(tags == 'tab03') {
			$("#choice .tab03").fadeIn(500);
			} else if(tags == 'tab04') {
			$("#choice .tab04").fadeIn(500);
			} else if(tags == 'tab05') {
			$("#choice .tab05").fadeIn(500);
			} else if(tags == 'tab06') {
			$("#choice .tab06").fadeIn(500);
			} else if(tags == 'tab07') {
			$("#choice .tab07").fadeIn(500);
			} else if(tags == 'tab08') {
			$("#choice .tab08").fadeIn(500);
			} else if(tags == 'tab09') {
			$("#choice .tab09").fadeIn(500);
			} else if(tags == 'tab10') {
			$("#choice .tab10").fadeIn(500);
			} else {
			$("#choice .box_news").fadeIn(500);
		}
	});
});
</script>

<div class="con_news">
	<div class="main">
		<div id="tags">
			<span class="select">すべて</span>
			<span id="tab01">求人情報</span>
			<span id="tab02">告知告知告知告知告知告知告知</span>
			<span id="tab03">告知</span>
			<span id="tab04">告知</span>
			<span id="tab05">告知</span>
		</div>

		<div id="choice">
			<div class="box_news clickable tab01">
				<p class="img"><img src="images/img_nophoto.jpg" alt="No Photo"></p>
				<div class="box_info">
					<p class="date">2017.9.15</p>
					<p class="cate">求人情報</p>
				</div><!-- /.box_info -->
				<h4><a href="detail.php">2018年職員採用はじまりました。
				</a></h4>
			</div><!-- /.box_news -->

			<div class="box_news clickable tab02">
			<a href="https://www.google.co.jp/" target="_blank">
				<p class="img"><img src="images/img_nophoto.jpg" alt="No Photo"></p>
				<div class="box_info">
					<p class="date">2017.9.20</p>
					<p class="cate">告知</p>
				</div><!-- /.box_info -->
				<h4>こぐまの森幼稚園オープンしました。<i class="fa fa-external-link"></i></a></h4>
			</div><!-- /.box_news -->

			<div class="box_news clickable tab01">
				<p class="img"><img src="images/img_sample01.jpg" alt="記事タイトルが入ります。"></p>
				<div class="box_info">
					<p class="date">2017.9.15</p>
					<p class="cate">求人情報</p>
				</div><!-- /.box_info -->
				<h4><a href="detail.php">2018年職員採用はじまりました。
				</a></h4>
			</div><!-- /.box_news -->

			<div class="box_news clickable tab02">
				<p class="img"><img src="images/img_sample02.jpg" alt="記事タイトルが入ります。"></p>
				<div class="box_info">
					<p class="date">2017.9.20</p>
					<p class="cate">告知</p>
				</div><!-- /.box_info -->
				<h4><a href="detail.php">こぐまの森幼稚園オープンしました。
				</a></h4>

			</div><!-- /.box_news -->

			<div class="box_news clickable tab01">
				<p class="img"><img src="images/img_sample03.jpg" alt="記事タイトルが入ります。"></p>
				<div class="box_info">
					<p class="date">2017.9.15</p>
					<p class="cate">求人情報</p>
				</div><!-- /.box_info -->
				<h4><a href="detail.php">2018年職員採用はじまりました。
				</a></h4>
			</div><!-- /.box_news -->
		</div>
	</div>
</div>

.con_news{
	@extend %bw;
	@extend %cf;
	@include cV(margin-top, 40px, 30px, 30px);
	@include cV(margin-bottom, 60px, 50px, 40px);
	.main {
		width: 70%;
		float: left;
		@include mq(tab_sp) {
			width: 100%;
			float: none;
		}
		#tags {
			margin-bottom: 20px;
			@extend %cf;
			@include mq(sp) {
				margin-bottom: 35px;
			}
			span {
				float: left;
				width: 24%;
				margin-left: 1%;
				text-align: center;
				background: #eee;
				border-radius: 5px;
				transition: all .2s;
				margin-bottom: 5px;
				text-decoration: none;
				font-size: 1.3em;
				padding: 10px 5px;
				color: #434340;
				display: block;
				cursor: pointer;
				@include mq(sp) {
					width: 49%;
					margin-left: 2%;
					font-size: 1.1em;
					&:nth-child(2n+1) {
						margin-left: 0;
					}
				}
				&:hover {
					opacity: .8;
				}
				@include mq(pc_tab) {
					&:nth-child(4n+1) {
						margin-left: 0;
					}
				}
			}
		}
		.box_news {
			border-bottom: dotted 1px #000;
			padding: 20px 0;
			overflow: hidden;
			position: relative;
			@include mq(sp) {
				padding: 15px 0 15px 0;
				margin-bottom: 0;
				&:first-child {
					padding: 0 0 15px 0;
				}
			}
			&.fitted {
				cursor: pointer;
				&.hovered {
					background: #bbb;
					@include mq(sp) {
						background: none;
					}
					h4 {
						a {
							text-decoration: none;
						}
					}
				}
			}
			.img {
				width: 220px;
				max-height: 146px;
				overflow: hidden;
				float: left;
				margin-right: 15px;
				@include mq(sp) {
					width: 25%;
				}
			}
			.box_info {
				overflow: hidden;
				margin-bottom: 10px;
				@include mq(sp) {
					margin-bottom: 5px;
					width: 70%;
					float: right;
				}
				p {
					display: inline-block;
					vertical-align: middle;
				}
				.date {
					color: #000;
					margin-right: 10px;
					@include fsz(19);
				}
				.cate {
					color: #fff;
					font-size: 1.3em;
					background: #aaa;
					padding: 2px 25px 0;
					border-radius:5px;
					min-width: 90px;
					text-align: center;
					font-weight: normal;
					@include mq(sp) {
						margin: 0 0 3px;
						@include fsz(12);
					}
				}
				.garden {
					margin-left: 10px;
					font-size: 1.2em;
					color: #eee;
					font-weight: bold;
					@include mq(sp) {
						display: block;
					}
				}
			}
			h4 {
				overflow: hidden;
				margin: 0.5em 0;
				font-weight: normal;
				line-height: 1.5;
				@include fsz(18);
				a {
					text-decoration: none;
					&:hover {
						opacity: .8;
					}
				}
				@include mq(sp) {
					margin: 0 0 0.5em 0;
					@include fsz(14);
					width: 70%;
					float: right;
				}
			}
		}
	}
}

.select {
	background: #aaa !important;
	color: #fff !important;
}