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