<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery Sample</title>
<script src="jquery.js"></script>
</style>
</head>
<body>
<div id="container">
<div id="navi">
<ul>
<li><a href="https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<img src='https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></a></li>
<li><a href="https://images.unsplash.com/photo-1504754524776-8f4f37790ca0?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<img src='https://images.unsplash.com/photo-1504754524776-8f4f37790ca0?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></a></li>
<li><a href="https://images.unsplash.com/photo-1497888329096-51c27beff665?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<img src='https://images.unsplash.com/photo-1497888329096-51c27beff665?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></a></li>
<li><a href="https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<img src='https://images.unsplash.com/photo-1515003197210-e0cd71810b5f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></a></li>
<li><a href="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<img src='https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></a></li>
<li><a href="https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<img src='https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></a></li>
</ul>
</div>
<div id="main">
<li><a href="https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
<img src='https://images.unsplash.com/photo-1424847651672-bf20a4b0982b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></a></li>
</div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-color: #000;
}
#container {
width: 1000px;
margin: 20px auto;
}
#navi {
width: 300px;
float: left;
}
#navi ul {
height: 460px;
list-style-type: none;
}
#navi ul li {
list-style-type: none;
width: 150px;
float: left;
margin-bottom:20px;
}
#navi ul li img {
border: 3px solid #FFF;
width: 126px;
}
#main {
width: 650px;
float: right;
}
#main img {
border: 3px solid #FFF;
width: 650px;
height: auto;
position: absolute;
border: 3px solid #FFF;
}
$(function(){
$("#navi a").click(function(){
$("#main img").before("<img src='"+$(this).attr("href")+"' alt=''>");
$("#main img:last").fadeOut("1000", function(){
$(this).remove();
});
return false;
});
});
External CSS
This Pen doesn't use any external CSS resources.