列表获取对应图片

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6     <link href="css/demo.css" rel="stylesheet" />
 7     <script src="js/jquery-1.10.2.min.js"></script>
 8     <script src="js/demo.js"></script>
 9 </head>
10 <body>
11     <ul id="menu">
12         <li><a href="javascript:;" class="bg">推荐</a></li>
13         <li><a href="javascript:;">前端开发</a></li>
14         <li><a href="javascript:;">编程语言</a></li>
15         <li><a href="javascript:;">互联网营销</a></li>
16         <li><a href="javascript:;">互联网产品</a></li>
17     </ul>
18     <div id="txt">
19         <div class="con">推荐</div>
20         <div class="con">前端开发</div>
21         <div class="con">编程语言</div>
22         <div class="con">互联网营销</div>
23         <div class="con">互联网产品</div>
24     </div>
25 </body>
26 </html>

 1 *{
 2     margin:0px;
 3     padding:0px;
 4     font-family:"微软雅黑";
 5     list-style-type:none;
 6 }
 7 a{
 8     text-decoration:none;
 9 }
10 #menu li a{
11     display:block;
12     height:40px;
13     padding:0px 30px;
14     float:left;
15     color:#000;
16     border-bottom:solid 1px #808080;
17     line-height:40px;/*垂直居中*/
18 }
19 #menu li a:hover{
20     color:#1d3b97; 
21 }
22 #txt{
23     clear:both;/*清除浮动*/
24 }
25 .con{
26     width:620px;
27     height:400px;
28     border:solid 1px red;
29     border:solid 1px #808080;
30     border-top-width:0px;
31 }
32 #menu li .bg{
33     border-bottom:solid 3px #1d3b97;
34 }

1 /// <reference path="jquery-1.10.2.min.js" />
2 $(function () {
3     $(".con").eq(0).show().siblings().hide();
4     $("#menu a").mouseover(function () {
5         $(this).addClass("bg").parent().siblings().find("a").removeClass("bg");
6         var i = $(this).parent().index();
7         $(".con").eq(i).show().siblings().hide();
8     });
9 });