JavaScript タブメニュー

JavaScript Js タブメニュー

index.html

-----

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="styles.css"> -->
<title>tab JS</title>
<style>
body {
padding: 0;
margin: 0;
font-family: Verdana, sans-serif;
}
.container {
padding: 0;
margin: 30px auto;
width: 500px;
background: #dce0e0;
}
ul.menu {
list-style: none;
padding: 0;
margin: 0;
font-size: 0;
}
ul.menu li {
display: inline-block;
}
ul.menu li a {
display: inline-block;
font-size: 14px;
width: 80px;
height: 20px;
line-height: 20px;
text-align: center;
text-decoration: none;
padding: 7px;
color: #333;
}
ul.menu li a.active {
background: #353d3e;
color: #fff;
}
ul.menu li a:not(.active):hover {
opacity: 0.5;
transition: .8s;
}
.content {
font-size: 14px;
padding: 7px 10px;
line-height: 1.4;
background: #353d3e;
color: #fff;
min-height: 150px;
display: none;
}
.content.active {
display: block;
}
</style>
</head>

<body>
<!--
<div id="container">
<ul>
<li class="t_1">tab1</li>
<li class="t_2">tab2</li>
<li class="t_3">tab3</li>
</ul>
<div id="content">
<div id="content_1">11111111111111</div>
<div id="content_2">22222222222222</div>
<div id="content_3">33333333333333</div>
</div>
</div>
-->

<div class="container">
<ul class="menu">
<li><a href="#" data-id="about" class="active menu_item">About</a></li>
<li><a href="#" data-id="service" class="menu_item">Service</a></li>
<li><a href="#" data-id="contact" class="menu_item">Contact</a></li>
</ul>
<div class="content active" id="about">
about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about about
</div>
<div class="content" id="service">
service service service service service service service service service service service service service service service service service service service service service service service service service service
</div>
<div class="content" id="contact">
contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact contact
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="tab.js"></script>
</body>
</html>

-----

styles.css

ul {
list-style: none;
width: 90%;
}

.t_1 {
float: left;
margin-right: 10em;
width: 26%;
}

.t_2 {
float: left;
margin-right: 10em;
width: 26%;
}

.t_3 {
float: left;
width: 26%;
}

#content {
margin-top: 5em;
}

#content_1 {
display: none;
width: 20%;
height: 10em;
background-color: #000;
float: left;
}

#content_2 {
display: none;
width: 20%;
height: 10em;
background-color: blue;
float: left;
}

#content_3 {
display: none;
width: 20%;
height: 10em;
background-color: yellow;
float: left;
}

#co2 {
padding-top: 10em;
}

------

tab.js

/*
$(function(){
'use strict';

$('.t_1').on('click',function(){
$('#content_1').fadeIn();
$('#content_2').fadeOut();
$('#content_3').fadeOut();
});

$('.t_2').on('click',function(){
$('#content_1').fadeOut();
$('#content_2').fadeIn();
$('#content_3').fadeOut();
});

$('.t_3').on('click',function(){
$('#content_1').fadeOut();
$('#content_2').fadeOut();
$('#content_3').fadeIn();
});


});
*/

$(function(){
'use strict';

var menuItems = document.getElementsByClassName('menu_item');
var contents = document.getElementsByClassName('content');

var i;

for(i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function(e){
// イベントのデフォルト動作を無効化
e.preventDefault();

var i;

for(i = 0; i < menuItems.length; i++) {
menuItems[i].className = 'menu_item';
}

this.className = 'menu_item active';

for(i = 0; i < contents.length; i++) {
contents[i].className = 'content';
}

// data-id 取得方法
document.getElementById(this.dataset.id).className = 'content active';

});
}

});