网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文：

　

标题 jQuery侧边栏实现代码
范文
    本文给大家介绍jquery侧边栏实现代码，这些侧边栏菜单可以用在不同风格的网页上,如果你觉得不错,可以参考下本文实现代码
    先给大家展示下实现效果图，如果亲感觉是您想要的效果，请参考本代码。
    名单
    实现代码如下所示：
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JavaScript菜单侧边展开(改良版)</title>
    </head>
    <body>
    <ul id="navigation">
    <li><a href="#">系统管理</a>
    <ul>
    <li><a href="#">地区设置</a></li>
    <li><a href="#">分行设置</a></li>
    <li><a href="#">银行操作用户设置</a></li>
    <li><a href="#">密码修改</a></li>
    </ul>
    </li>
    <li><a href="#">学校管理</a>
    <ul>
    <li><a href="#">学校设置</a></li>
    <li><a href="#">学校查询</a></li>
    </ul>
    </li>
    <li><a href="#">基础信息管理</a></li>
    <li><a href="#">统计系统查询</a></li>
    </ul>
    <script src="jquery-1.11.1.js"></script>
    <script>
    var $j = jQuery.noConflict();
    $j(function(){
    var lis = document.getElementById("navigation").getElementsByTagName("li");
    for (var i=0; i<lis.length; i++) {
    lis[i].onmouseover=function() {
    var subMenu = this.getElementsByTagName("ul")[0];
    subMenu.style.display = "block";
    var subcolor = this.getElementsByTagName("a")[0];
    subcolor.style.background = "lightblue";
    }
    lis[i].onmouseout=function() {
    var subMenu = this.getElementsByTagName("ul")[0];
    subMenu.style.display = "none";
    var subcolor = this.getElementsByTagName("a")[0];
    subcolor.style.background = "";
    }
    }
    });
    </script>
    <script src="jquery-1.11.1.js"></script>
    </body>
    </html>
    以上是本文给大家介绍的jquery侧边栏代码，希望对大家有所帮助！
随便看

　

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/13 14:32:34