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;}
  • 相关阅读:
    Ajax返回xml类型数据
    选择排序 C&&C++
    php 给app写短信验证码 使用memcache缓存验证码
    php 免费的快递查询接口快递100
    CSS字体大小设置时的参考（转）
    excel vba 打印设置（转）
    MySQL的数据类型（转）
    XMind 8 pro update 7激活办法
    张小龙2011年饭否日记
    页面静态化技术Freemarker技术的介绍及使用实例.
  • 原文地址：https://www.cnblogs.com/Leo_wl/p/1728074.html
Copyright © 2011-2022 走看看