<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#container{
width: 980px;
height: 600px;
/*background: #ffcccc;*/
margin: 50px auto;
}
#container .header {
height: 45px;
line-height: 45px;
border-bottom: 2px solid #000;
}
#container .header h3 {
float: left;
margin-left: 20px;
}
#container .header ul {
float: right;
margin-top: -2px;
}
#container .header ul li {
list-style: none;
float: left;
width: 100px;
text-align: center;
border: 1px solid #ccc;
border-right: none;
}
#container .header ul li:last-child {
border-right: 1px solid #ccc;
}
#container .header ul li.active {
border: 2px solid #000;
border-bottom: 2px solid #fff;
}
#container .showCon {
margin-top: 10px;
}
#container .showCon img {
width: 980px;
}
</style>
</head>
<body>
<div id="container">
<div class="header">
<h3>服装</h3>
<ul>
<li class="active">经典男装</li>
<li>靓丽女装</li>
<li>可爱童装</li>
</ul>
</div>
<div class="showCon">
<img src="images/1.jpg" />
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$("#container .header ul li").hover(function() {
var index = $(this).index() + 1;
console.log(index);
$(this).addClass("active").siblings().removeClass("active");
$("#container .showCon").html("<img src='images/" + index + ".jpg' />");
});
</script>
</body>
</html>
