Jquery+menu


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="outer menu">    <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{ 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; auto !important; 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;}  
3.css/menu.css*{ margin:0; padding:0;}body{ font:12px Verdana, Arial, Helvetica, sans-serif;}ul{ list-style:none;}.menu{ 949px; margin:0 auto; overflow:hidden;}.outer{ background:url("../images/menu_sprites.png") no-repeat top left; margin-top:10px; padding-left:15px;}.inner{ background:url("../images/menu_sprites.png") no-repeat top right; padding-right:5px;}.menu ul{ background:url("../images/menu_sprites.png") repeat-x 0 -102px; height:34px; }.menu li{ float:left; auto !important; 1%; white-space:nowrap; padding:0 5px; background:url("../images/menu_sprites.png") no-repeat bottom left;}.menu li a{ display:block; text-decoration:none; padding-left:15px; cursor:pointer;}.menu li a span { display:block;height:34px; line-height:34px; color:white; padding-right:15px;}.menu li a:hover { background:url("../images/menu_sprites.png") no-repeat left -68px;}.menu li a:hover span { background:url("../images/menu_sprites.png") no-repeat right -68px;}.menu li.selected a { background:url("../images/menu_sprites.png") no-repeat left -34px;}.menu li.selected a span { background:url("../images/menu_sprites.png") no-repeat right -34px; color:red;}
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Leo_wl/p/1728074.html