|
Html代码
1.1.menu.html 2. 3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4.<html xmlns="http://www.w3.org/1999/xhtml"> 5.<head> 6.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 7.<title>CSS-JQuery Menu01</title> 8.<link rel="stylesheet" type="text/css" href="css/menu.css"/> 9.<script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script> 10.<script type="text/javascript" src="JQuery/menu.js"></script> 11.</head> 12. 13.<body> 14.<div class="menu outer"> 15. <div class="inner"> 16. <ul> 17. <li class="selected" style="background:none;"><a href="#">首页</a></li> 18. <li><a href="#">新闻</a></li> 19. <li><a href="#">体育</a></li> 20. <li><a href="#">财经</a></li> 21. <li><a href="#">汽车</a></li> 22. <li><a href="#">房产</a></li> 23. <li><a href="#">股市</a></li> 24. <li><a href="#">旅游</a></li> 25. <li><a href="#">美食</a></li> 26. <li><a href="#">女性</a></li> 27. <li><a href="#">播客</a></li> 28. <li><a href="#">拼客</a></li> 29. <li><a href="#">交友</a></li> 30. <li><a href="#">大杂烩</a></li> 31. </ul> 32. </div> 33.</div> 34.</body> 35.</html> 1.menu.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS-JQuery Menu01</title> <link rel="stylesheet" type="text/css" href="css/menu.css"/> <script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="JQuery/menu.js"></script> </head> <body> <div class="menu outer"> <div class="inner"> <ul> <li class="selected" style="background:none;"><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">体育</a></li> <li><a href="#">财经</a></li> <li><a href="#">汽车</a></li> <li><a href="#">房产</a></li> <li><a href="#">股市</a></li> <li><a href="#">旅游</a></li> <li><a href="#">美食</a></li> <li><a href="#">女性</a></li> <li><a href="#">播客</a></li> <li><a href="#">拼客</a></li> <li><a href="#">交友</a></li> <li><a href="#">大杂烩</a></li> </ul> </div> </div> </body> </html> Js代码 1.2.JQuery/menu.js 2. 3.$(function(){ 4. var span = '<span></span>'; 5. $('.menu li a').wrapInner(span); 6. 7. $('.menu li').click(function(){ 8. $(this).addClass('selected') 9. .siblings().removeClass('selected'); 10. }); 11.}); 2.JQuery/menu.js $(function(){ var span = '<span></span>'; $('.menu li a').wrapInner(span); $('.menu li').click(function(){ $(this).addClass('selected') .siblings().removeClass('selected'); }); }); Css代码 1.3.css/menu.css 2. 3.*{ margin:0; padding:0;} 4.body{ font:12px Verdana, Arial, Helvetica, sans-serif;} 5.ul{ list-style:none;} 6. 7..menu{ width:949px; margin:0 auto; overflow:hidden;} 8..outer{ background:url("../images/menu_sprites.png") no-repeat top left; margin-top:10px; padding-left:15px;} 9..inner{ background:url("../images/menu_sprites.png") no-repeat top right; padding-right:5px;} 10..menu ul{ background:url("../images/menu_sprites.png") repeat-x 0 -102px; height:34px; } 11..menu li{ float:left; width:auto !important; width:1%; white-space:nowrap; padding:0 5px; background:url("../images/menu_sprites.png") no-repeat bottom left;} 12..menu li a{ display:block; text-decoration:none; padding-left:15px; cursor:pointer;} 13..menu li a span { display:block;height:34px; line-height:34px; color:white; padding-right:15px;} 14. 15..menu li a:hover { background:url("../images/menu_sprites.png") no-repeat left -68px;} 16..menu li a:hover span { background:url("../images/menu_sprites.png") no-repeat right -68px;} 17. 18..menu li.selected a { background:url("../images/menu_sprites.png") no-repeat left -34px;} 19..menu li.selected a span { background:url("../images/menu_sprites.png") no-repeat right -34px; color:red;} |
| 关键字： |
0310-8170888