效果图如下：
代码如下：
<%--
Document : 护士工作站管理菜单导航
Created on : 2014-12-20, 17:32:07
Author : liyulin lyl010991@126.com
--%>
<%@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>原文地址：http://blog.csdn.net/class_horse/article/details/43308287
