index.html
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Tab Menu</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="application.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<ul id="tabs-menu">
<li id="tab-1"><a href="#content-1">A</a></li>
<li id="tab-2"><a href="#content-2">B</a></li>
<li id="tab-3"><a href="#content-3">C</a></li>
<li id="tab-4"><a href="#content-4">D</a></li>
</ul>
<div id="content-1" class="tabs-content">
A에 들어갈 내용
</div>
<div id="content-2" class="tabs-content">
B에 들어갈 내용
</div>
<div id="content-3" class="tabs-content">
C에 들어갈 내용
</div>
<div id="content-4" class="tabs-content">
D에 들어갈 내용
</div>
</div>
</body>
</html>
stylesheet.css
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#container {
margin: 10px auto;
width: 600px;
padding: 10px;
background: #F88;
}
#tabs-menu {
margin: 0;
padding: 0;
list-style-type: none;
width: 441px;
height: 30px;
background: url(./images/pink/bar_pink.gif) 0 0 no-repeat;
}
#tabs-menu li {
float: left;
margin-left: 2px;
}
#tabs-menu li#tab-1 {
margin-left: 144px;
}
#tabs-menu li a {
display: block;
overflow: hidden;
width: 71px;
height: 0;
padding-top: 30px;
background-position: 0 100%;
background-repeat: no-repeat;
}
#tabs-menu li#tab-1 a {
background-image: url(./images/pink/pink_off_01.gif);
}
#tabs-menu li#tab-1 a:hover,
#tabs-menu li#tab-1 a.selected {
background-image: url(./images/pink/pink_on_01.gif);
}
#tabs-menu li#tab-2 a {
background-image: url(./images/pink/pink_off_02.gif);
}
#tabs-menu li#tab-2 a:hover,
#tabs-menu li#tab-2 a.selected {
background-image: url(./images/pink/pink_on_02.gif);
}
#tabs-menu li#tab-3 a {
background-image: url(./images/pink/pink_off_03.gif);
}
#tabs-menu li#tab-3 a:hover,
#tabs-menu li#tab-3 a.selected {
background-image: url(./images/pink/pink_on_03.gif);
}
#tabs-menu li#tab-4 a {
background-image: url(./images/pink/pink_off_04.gif);
}
#tabs-menu li#tab-4 a:hover,
#tabs-menu li#tab-4 a.selected {
background-image: url(./images/pink/pink_on_04.gif);
}
.tabs-content {
padding: 20px 0;
}
application.js
$(function() {
var menu_items = $('#tabs-menu li');
$('.tabs-content').hide();
if (location.hash) {
$('a[href=' + location.hash + ']').addClass('selected');
$(location.hash).show();
} else {
menu_items.find('a').first().addClass('selected');
$('.tabs-content:first').show();
}
menu_items.each(function(index, item) {
$(item).find('a').click(function() {
var target = $(this).attr('href');
menu_items.find('a').removeClass('selected');
$(this).addClass('selected');
$('.tabs-content').hide();
$(target).show();
});
});
});
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Tab Menu</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="stylesheet.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="application.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<ul id="tabs-menu">
<li id="tab-1"><a href="#content-1">A</a></li>
<li id="tab-2"><a href="#content-2">B</a></li>
<li id="tab-3"><a href="#content-3">C</a></li>
<li id="tab-4"><a href="#content-4">D</a></li>
</ul>
<div id="content-1" class="tabs-content">
A에 들어갈 내용
</div>
<div id="content-2" class="tabs-content">
B에 들어갈 내용
</div>
<div id="content-3" class="tabs-content">
C에 들어갈 내용
</div>
<div id="content-4" class="tabs-content">
D에 들어갈 내용
</div>
</div>
</body>
</html>
stylesheet.css
body {
font-size: 12px;
background: #FFF;
color: #333;
margin: 0;
}
#container {
margin: 10px auto;
width: 600px;
padding: 10px;
background: #F88;
}
#tabs-menu {
margin: 0;
padding: 0;
list-style-type: none;
width: 441px;
height: 30px;
background: url(./images/pink/bar_pink.gif) 0 0 no-repeat;
}
#tabs-menu li {
float: left;
margin-left: 2px;
}
#tabs-menu li#tab-1 {
margin-left: 144px;
}
#tabs-menu li a {
display: block;
overflow: hidden;
width: 71px;
height: 0;
padding-top: 30px;
background-position: 0 100%;
background-repeat: no-repeat;
}
#tabs-menu li#tab-1 a {
background-image: url(./images/pink/pink_off_01.gif);
}
#tabs-menu li#tab-1 a:hover,
#tabs-menu li#tab-1 a.selected {
background-image: url(./images/pink/pink_on_01.gif);
}
#tabs-menu li#tab-2 a {
background-image: url(./images/pink/pink_off_02.gif);
}
#tabs-menu li#tab-2 a:hover,
#tabs-menu li#tab-2 a.selected {
background-image: url(./images/pink/pink_on_02.gif);
}
#tabs-menu li#tab-3 a {
background-image: url(./images/pink/pink_off_03.gif);
}
#tabs-menu li#tab-3 a:hover,
#tabs-menu li#tab-3 a.selected {
background-image: url(./images/pink/pink_on_03.gif);
}
#tabs-menu li#tab-4 a {
background-image: url(./images/pink/pink_off_04.gif);
}
#tabs-menu li#tab-4 a:hover,
#tabs-menu li#tab-4 a.selected {
background-image: url(./images/pink/pink_on_04.gif);
}
.tabs-content {
padding: 20px 0;
}
application.js
$(function() {
var menu_items = $('#tabs-menu li');
$('.tabs-content').hide();
if (location.hash) {
$('a[href=' + location.hash + ']').addClass('selected');
$(location.hash).show();
} else {
menu_items.find('a').first().addClass('selected');
$('.tabs-content:first').show();
}
menu_items.each(function(index, item) {
$(item).find('a').click(function() {
var target = $(this).attr('href');
menu_items.find('a').removeClass('selected');
$(this).addClass('selected');
$('.tabs-content').hide();
$(target).show();
});
});
});
