jQueryでは作れるけど、
勉強もかねて、あえてJavaScriptでタブメニューを作成。
不細工かな...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タブメニュー</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" media="screen" href="css/style.css" />
</head>
<body>
<div class="tab">
<div class="tabBox">
<h4 class="tabMenu">タブ[1]</h4>
<p>タブ[1]の内容が入ります</p>
</div>
<div class="tabBox">
<h4 class="tabMenu">タブ[2]</h4>
<p>タブ[2]の内容が入ります</p>
</div>
<div class="tabBox">
<h4 class="tabMenu">タブ[3]</h4>
<p>タブ[3]の内容が入ります</p>
</div>
</div>
<script>
var tab = document.getElementsByClassName('tab')[0];
var tabBox = document.getElementsByClassName('tabBox');
var tabMenu = document.getElementsByClassName('tabMenu');
var text = [];
var currentNum;
var div = document.createElement('div');
div.className = 'menu';
// .tabMenuのテキスト取得
for(var i=0;i<tabMenu.length;i++){
text[i] = tabMenu.item(i).firstChild;
}
/* .tabの下に<div class="menu"></div>を配置。
* また、要素を下記のような並び順に変更
* <div class="tab">
* <div class="menu"></div>
* <div class="tabBox"></div>
* <div class="tabBox"></div>
*/
tab.appendChild(div);
for(var i=0;i<tabBox.length;i++){
tab.appendChild(tabBox[0]);
}
/*
* .menuの子要素に<h4 class="tabMenu"></h4>を移動
* さらにh4の子要素に<a href="javascript: void(0);></a>を追加
* aタグのテキストとしてtext[i]で取得していたものを配置する
*/
var menu = document.getElementsByClassName('menu')[0];
var anchor = [];
for(var i=0;i<tabMenu.length;i++){
menu.appendChild(tabMenu[i]);
anchor[i] = document.createElement('a');
anchor[i].setAttribute('href', 'javascript:void(0);');
anchor[i].appendChild(text[i]);
tabMenu[i].appendChild(anchor[i]);
}
/*
* タブ[1]を初期表示として、表示しているタブに色を付ける（class名：currentを与える）
*/
var current = 0;
var show;
for(var i=0;i<tabBox.length;i++){
if(i == current){
show = tabMenu[current];
show.className = 'tabMenu current';
}else{
for(var j=0;j<tabBox.length;j++){
if(i == current) continue;
tabBox[i].style.display = 'none';
}
}
}
/*
* タブをクリックしたら、表示内容が切り替わるようにクリックイベントを作成
*/
for(var i=0;i<tabMenu.length;i++){
document.querySelectorAll('.menu a')[i].onclick = function(){
show.className = 'tabMenu';
show = this.parentNode;
show.className = 'tabMenu current';
for(var j=0;j<tabMenu.length;j++){
if(tabMenu[j].classList[1] == 'current'){
currentNum = j;
}
tabBox[j].style.display = 'none';
}
tabBox[currentNum].style.display = 'block';
};
}
</script>
</body>
</html>
//style.css
.menu {
overflow: hidden;
}
.tabMenu{
float: left;
width: 200px;
text-align: center;
border:1px solid #CCC;
border-radius: 5px 5px 0 0;
box-sizing:border-box;
margin-bottom: 0;
}
.tabBox {
border: 1px solid #CCC;
width: 600px;
box-sizing:border-box;
}
a {
display: block;
text-decoration: none;
padding: 5px;
box-sizing:border-box;
border-radius: 5px 5px 0 0;
}
.current {
background: rgba(255, 100, 200, 0.5);
}
.current > a {
color: #FFF;
}