zoukankan      html  css  js  c++  java

  • 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;}
  • 相关阅读:
    51nod 1179 最大的最大公约数 （数论）
    POJ 3685 二分套二分
    POJ 3045 贪心
    LIC
    HDU 1029 Ignatius and the Princess IV
    HDU 1024 Max Sum Plus Plus
    HDU 2389 Rain on your Parade
    HDU 2819 Swap
    HDU 1281 棋盘游戏
    HDU 1083 Courses
  • 原文地址：https://www.cnblogs.com/Leo_wl/p/1728074.html
Copyright © 2011-2022 走看看