edom18/sample.html

## sample.html
<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="utf-8" />
<style>
body, div, ul, li, h1, h2, h3 {
  margin: 0;
  padding: 0;
}

body {
  margin: 30px;
}

#tabCtrl li {
  display: inline-block;
  border: solid 1px;
}

#tab ul {
  border: solid 1px;
  width: 450px;
  height: 300px;
  overflow: hidden;
}
#tab ul li {
  height: 100%;
}

#tab li:nth-child(1) {
  background-color: red;
}
#tab li:nth-child(2) {
  background-color: green;
}
#tab li:nth-child(3) {
  background-color: blue;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(function () {

    $('#tab li:not(:first-child)').slideUp();

    $('#tabCtrl li').click(function (e) {

      var index = $('#tabCtrl li').index(this);
      $('#tab li').slideUp();
      $('#tab li').eq(index).slideDown();
  });
});
</script>
</head>
<body>
<div id="container">
<div id="tabCtrl">
<ul>
<li>TAB1</li>
<li>TAB2</li>
<li>TAB3</li>
</ul>
</div>
<div id="tab">
<ul>
<li>
tab1
</li>
<li>
tab2
</li>
<li>
tab3
</li>
</ul>
<!-- /#tab --></div>
<!-- /#container --></div>
</body>
</html>
	<!DOCTYPE html>

	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<style>
	body, div, ul, li, h1, h2, h3 {
	margin: 0;
	padding: 0;
	}

	body {
	margin: 30px;
	}

	#tabCtrl li {
	display: inline-block;
	border: solid 1px;
	}

	#tab ul {
	border: solid 1px;
	width: 450px;
	height: 300px;
	overflow: hidden;
	}
	#tab ul li {
	height: 100%;
	}

	#tab li:nth-child(1) {
	background-color: red;
	}
	#tab li:nth-child(2) {
	background-color: green;
	}
	#tab li:nth-child(3) {
	background-color: blue;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script>
	$(function () {

	$('#tab li:not(:first-child)').slideUp();

	$('#tabCtrl li').click(function (e) {

	var index = $('#tabCtrl li').index(this);
	$('#tab li').slideUp();
	$('#tab li').eq(index).slideDown();
	});
	});
	</script>
	</head>
	<body>
	<div id="container">
	<div id="tabCtrl">
	<ul>
	<li>TAB1</li>
	<li>TAB2</li>
	<li>TAB3</li>
	</ul>
	</div>
	<div id="tab">
	<ul>
	<li>
	tab1
	</li>
	<li>
	tab2
	</li>
	<li>
	tab3
	</li>
	</ul>
	<!-- /#tab --></div>
	<!-- /#container --></div>
	</body>
	</html>