<%@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>