jquery实现的一个菜单导航

浏览数：19 / 时间：2015年06月09日

效果图如下：

技术分享

代码如下：

<%-- 
    Document   : 护士工作站管理菜单导航
    Created on : 2014-12-20, 17:32:07
    Author     : liyulin [email protected]
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>护士工作站管理</title>
        <link rel="icon" href="/hospital1/favicon.ico" type="image/x-icon">
        <script type="text/javascript" src="/hospital1/js/jquery-1.9.1.js"></script>
        <style type="text/css">
            .navbar ul
            {
                list-style-type: none;
                width: 90%;
                margin-left: 1%;
                background: #efefef; 
                border-radius: 10px; 
            }
            .navbar ul li
            {
                list-style-type: none;
                text-align: center;
                float: left;
                width: auto;
                height: 50px;
                margin: auto;
                line-height: 50px;
                border: 0px;
                background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
                background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
                background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
                box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
                font-weight: bold;
                font-size: 16px;
                padding-left: 15px;
                padding-right: 15px;
            }
            .navbar ul li:first-child{
                border-radius: 0px 0 0px 10px;
            }
            .navbar ul li:last-child{
                 border-radius: 0px 0px 10px 0px;
            }
            .navbar ul li:hover
            {
                font-weight: bold;
                font-size: 18px;
                cursor: pointer;
                background: #4b545f;
                background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
                color: #ffffff;
            }
            .navbar ul .showdh
            {
                font-weight: bold;
                font-size: 18px;
                cursor: pointer;
                background: #4b545f;
                background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
                background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
                color: #ffffff;
            }
        </style>
        <script type="text/javascript">
            function goPage(x){
                $('#content').attr('src',x);
            }
            
            $(function(){
                $(".navbar ul li").click(function() {
                    $(".navbar ul li").each(function() {
                        $(this).removeClass("showdh");
                    });
                    $(this).addClass("showdh");
                });
            });
        </script>
    </head>
    <body style="background-color: #ffffff;">
        <div class="navbar">  
            <ul>  
                <li onclick="goPage('/hospital1/nsWork/ns_work_apply.jsp');" class="showdh">手术包器材申请</li>  
                <li onclick="goPage('/hospital1/nsWork/ns_work_kit_store.jsp');">手术包存储信息</li>  
                <li onclick="goPage('/hospital1/nsWork/ns_work_instrument_store.jsp');">器材存储信息</li>  
            </ul>  
        </div>
        <iframe id="content" style="width: 100%;height: 660px; border: 0px;margin-top: 30px;" src="/hospital1/nsWork/ns_work_apply.jsp"></iframe>
    </body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery实现的一个菜单导航