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 });