<style>
html * { margin:0; padding:0; }
body { padding:10px; margin-top:10px;}
body span { color:red; font-size: 30px; }
p { margin-bottom: 20px;}
#wrapper { width:522px; margin:0 auto; text-align:center;}
li { float: left; list-style: none; margin-left: 10px;overflow:hidden; width:123px; height:40px;}
li.first { margin-left:0px; }
li a {display:block; width:123px;}
li a img {display:block;}
#nav {width:522px; height:40px; margin: 0px auto 10px auto; }
#image { width:522px; height:400px; margin: 10px auto 0px auto; }
#image img { width: 522px; height: 400px; }
</style>
<script>
$(document).ready(function(){
$('#nav > ul > #springBtn').bind('click', function(){
$('#image > img').attr({src:'images/btn01.jpg', alt:'봄'});
});
$('#nav > ul > #summerBtn').bind('click', function(){
console.log("ffff");
$('#image > img').attr({src:'images/btn02.jpg', alt:'여름'});
});
$('#nav > ul > #fallBtn').bind('click', function(){
$('#image > img').attr({src:'images/btn03.jpg', alt:'가을'});
});
$('#nav > ul > #winterBtn').bind('click', function(){
$('#image > img').attr({src:'images/btn04.jpg', alt:'겨울'});
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li id="btn01" class="first on">
<a href="#">
<img src="images/btn1.jpg" />
</a>
</li>
<li id="btn02">
<a href="#">
<img src="images/btn2.jpg" />
</a>
</li>
<li id="btn03">
<a href="#">
<img src="images/btn3.jpg" />
</a>
</li>
<li id="btn04">
<a href="#">
<img src="images/btn4.jpg" />
</a>
</li>
</ul>
</div>
<div id="image">
<img src="images/spring.jpg" alt="bin" />
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<style>
html * { margin:0; padding:0; }
body { padding:10px; margin-top:100px;}
body span { color:red; font-size: 30px; }
p { margin-bottom: 20px;}
#wrapper { width:522px; margin:0 auto; text-align:center;}
li { float: left; list-style: none; margin-left: 10px;overflow:hidden; width:123px; height:40px;}
li.first { margin-left:0px; }
li a {display:block; width:123px;}
li a img {display:block;}
#nav {width:522px; height:40px; margin: 0px auto 10px auto; }
#image { width:522px; height:400px; margin: 10px auto 0px auto; }
#image.spring { background:url(images/spring.jpg) }
#image.summer { background:url(images/summer.jpg) }
#image.fall { background:url(images/fall.jpg) }
#image.winter { background:url(images/winter.jpg) }
</style>
<script>
$(document).ready(function(){
$('#nav > ul > #springBtn').bind('click', function(){
$('#image').removeClass().addClass('spring');
var log = $('#image');
console.log( log.attr('class'));
});
$('#nav > ul > #summerBtn').bind('click', function(){
$('#image').removeClass().addClass('summer');
var log = $('#image');
console.log( log.attr('class'));
});
$('#nav > ul > #fallBtn').bind('click', function(){
$('#image').removeClass().addClass('fall');
var log = $('#image');
console.log( log.attr('class'));
});
$('#nav > ul > #winterBtn').bind('click', function(){
$('#image').removeClass().addClass('winter');
var log = $('#image');
console.log( log.attr('class'));
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li id="springBtn" class="first on">
<a href="#">
<img src="images/btn1_2.jpg" />
</a>
</li>
<li id="summerBtn">
<a href="#">
<img src="images/btn2_2.jpg" />
</a>
</li>
<li id="fallBtn">
<a href="#">
<img src="images/btn3_2.jpg" />
</a>
</li>
<li id="winterBtn">
<a href="#">
<img src="images/btn4_2.jpg" />
</a>
</li>
</ul>
</div>
<div id="image" class="spring"></div>
</div>
</body>
</html>
