ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【japascript】1ページで内容が切り替わる動き


javascriptでコンテンツが切り替わる動きを作りました。

コンテンツが切り替わる

tabをクリックで内容が切り替わります。

Demo

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<link rel="stylesheet"href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<ul>
<li id="tab1" onClick="change(1);">tab1</li>
<li id="tab2" onClick="change(2);">tab2</li>
<li id="tab3" onClick="change(3);">tab3</li>
</ul>
<div id="content1">
<div class="img"></div>
<p>
コンテンツ1</p>
</div>
<div id="content2">
<div class="img"></div>
<p>
コンテンツ2</p>
</div>
<div id="content3">
<div class="img"></div>
<p>
コンテンツ3</p>
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";
/*reset*/
ul{
  list-style:none;
}
/*body*/
body{
  font-size:16px;
}
/*container*/
.container{
  margin:5% 10%;
  min-width:315px;
}
/*tab*/
ul{
  overflow:hidden;
}
li{
  color:#fff;
  font-weight:bold;
  text-align:center;
  text-shadow:2px 2px 2px #000;
  float:left;
  cursor:pointer;
  border-radius:15px 15px 0 0;
  line-height:30px;
  height:30px;
  width:100px;
}
li#tab1{
  background:#eeee88;
}
li#tab2{
  background:#ee88ee;
}
li#tab3{
  background:#88eeee;
}
/*content*/
#content2,#content3{
  display:none;
}
#content1,#content2,#content3{
  border-radius:0 15px 15px 15px;
  background:#eeee88;
  height:300px;
  padding:50px;
  box-sizing:border-box;
}
.img{
  float:left;
  background:#fff;
  height:200px;
  width:45%;
  margin-right:20px;
}
#content>p{
  float:left;
  width:45%;
}

javascript

function change(x) {
if(x==1) {	document.getElementById("content1").style.backgroundColor = "#eeee88";
document.getElementById("content1").style.display="block";
document.getElementById("content2").style.display="none";
document.getElementById("content3").style.display="none";}

if(x==2) {	document.getElementById("content2").style.backgroundColor = "#ee88ee";
document.getElementById("content1").style.display="none";
document.getElementById("content2").style.display="block";
document.getElementById("content3").style.display="none";}

if(x==3) {	document.getElementById("content3").style.backgroundColor = "#88eeee";
document.getElementById("content1").style.display="none";
document.getElementById("content2").style.display="none";
document.getElementById("content3").style.display="block";}
}