CSSで実装するタブメニュー (3)

f:id:sntkk3:20180321150313p:plain

今日は以下記事を参考にさせていただき、少しアレンジしてCSS + JS で実装するタブメニューを作ってみました。

[ 参考記事 ]
coliss.com

今回Demoに実装したコードは、以下の通りです。

[ HTML ]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tub</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>タブメニュー</h1>
<div class="box">
  <ul class="tabrow">
    <li class="selected"><a id ="tub_1" href="#tab_a">タブ1</a></li>
    <li><a id="tub_2" href="#tab_b">タブ2</a></li>
    <li><a id="tub_3" href="#tab_c">タブ3</a></li>
  </ul>
</div>
<div id="tab_a" class="content"> 
  <!--コンテンツA--> 
  <h2>猫</h2>
  <img src="img/neko.jpg" alt="猫">
</div>
<div id="tab_b" class="content"> 
  <!--コンテンツB--> 
  <h2>犬</h2>
  <img src="img/inu.jpg" alt="犬">
</div>
<div id="tab_c" class="content"> 
  <!--コンテンツC--> 
  <h2>鳥</h2>
  <img src="img/tori.jpg" alt="鳥">
</div>
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<script>
$(".tabrow>li").click(function(e) {
  e.preventDefault();
  $(".tabrow>li").removeClass("selected");
  $(this).addClass("selected");
  var idname = e.target.id;
  
  $('.content').css('display', 'none');
  if(idname=="tub_1") {
	$('#tab_a').css('display', 'block');  
    $('#tab_b').css('display', 'none');
	$('#tab_c').css('display', 'none');
  } else if (idname=="tub_2") {
	$('#tab_b').css('display', 'block');  
  } else if (idname=="tub_3") {
	$('#tab_c').css('display', 'block');  
  }
});
</script>
</body>
</html>

[ CSS ]

@charset "utf-8";
img {
	width: 50%;
}
/*タブ*/
.tabrow {
	text-align: center;
	list-style: none;
	line-height: 24px;
	margin-top: 50px;
	padding: 0;
	width: 100%;
}
.tabrow li {
	border: 1px solid #aaa;
	background: #ececec;
	display: inline-block;
	margin: 0 10px;
	padding: 10px;
	width: 250px;
}
.tabrow li.selected {
	background: #fff;
	color: #000;
}
.tabrow {
	position: relative;
}
.tabrow:after {
	bottom: 0;
	border-bottom: 1px solid #aaa;
	content: "";
	left: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
}
.tabrow:before {
	z-index: 1;
}
.tabrow li {
	position: relative;
	z-index: 0;
}
.tabrow li.selected {
	border-bottom-color: #fff;
	z-index: 2;
}
.tabrow li:before, .tabrow li:after {
	bottom: -1px;
	content: " ";
	height: 6px;
	position: absolute;
	width: 6px;
}
.tabrow li:before {
	left: -6px;
}
.tabrow li:after {
	right: -6px;
}
.tabrow li:after, .tabrow li:before {
	border: 1px solid #aaa;
}
.tabrow li {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}
.tabrow li:before {
	border-bottom-right-radius: 6px;
	border-width: 0 1px 1px 0;
}
.tabrow li:after {
	border-bottom-left-radius: 6px;
	border-width: 0 0 1px 1px;
}
.tabrow li:before {
	box-shadow: 2px 2px 0 #ececec;
}
.tabrow li:after {
	box-shadow: -2px 2px 0 #ececec;
}
.tabrow li.selected:before {
	box-shadow: 2px 2px 0 #fff;
}
.tabrow li.selected:after {
	box-shadow: -2px 2px 0 #fff;
}
#tab_a {
	display: block;
}
.content {
	display: none;
	padding: 32px;
}
div.col-md-4 > p {
	margin-top: 15px;
	text-align: left;
}
.col-md-4 {
	overflow: auto;
}