基于SSH的预约挂号系统之管理员系统界面初步完成

效果图

Html代码

	<div id="main">
		<div id="nav">
			<ul>
				<li class="menu"><a href="#">用户管理</a>
					<ul>
						<li><a href="#">查看用户</a></li>
						<li><a href="#">添加用户</a></li>
					</ul>
				</li>
				<li class="menu"><a href="#">医生管理</a>
					<ul>
						<li><a href="#">查看医生</a></li>
						<li><a href="#">添加医生</a></li>
					</ul>
				</li>
				<li class="menu"><a href="#">医院管理</a>
					<ul>
						<li><a href="#">查看医院</a></li>
						<li><a href="#">医院申请</a></li>
					</ul>
				</li>
				<li class="menu"><a href="#">公告管理</a>
					<ul>
						<li><a href="#">查看公告</a></li>
						<li><a href="#">添加公告</a></li>
					</ul>
				</li>
				<li class="menu"><a href="#">用户管理</a></li>
				<li class="menu"><a href="#">用户管理</a></li>
			</ul>
		</div>
		<div class="content">
			<div class="top_nav">
				<ul>
					<li><a href="#">查看用户 <img src="manage_off.png"></a></li>
					<li><a href="#">添加用户 <img src="manage_off.png"></a></li>
					<li><a href="#">查看医生 <img src="manage_off.png"></a></li>
					<li><a href="#">添加医生 <img src="manage_off.png"></a></li>
					<li><a href="#">查看医院 <img src="manage_off.png"></a></li>
					<li><a href="#">医院申请 <img src="manage_off.png"></a></li>
					<li><a href="#">查看公告 <img src="manage_off.png"></a></li>
					<li><a href="#">添加公告 <img src="manage_off.png"></a></li>
				</ul>
			</div>
			<div class="message">
				<div class="hello show"><h4>欢迎来到后台管理系统</h4></div>
				<div>查看用户</div>
				<div>添加用户</div>
				<div>查看医生</div>
				<div>添加医生</div>
				<div>查看医院</div>
				<div>医院申请</div>
				<div>查看公告</div>
				<div>添加公告</div>
			</div>
		</div>
	</div>

 CSS

body,ul,li,h4,p,th,td,form,input,textarea,select{
	margin: 0;
	padding: 0;
}
body{
	background-color: #e9e9e8;
}
#top{
	background-color: #1c1c1b;
	line-height: 50px;
}
#name{
	width: 20%;
	height: 50px;
	color: #e9e9e8;
}
#main{
	height: 550px;
}

/* 左侧导航栏开始 */
#nav{
	float: left;
	width: 150px;
	height: 100%;
	background-color: #222221;
}

.menu{
	width: 100%;
	text-align: center;
	line-height: 40px;
	border-bottom: 1px solid #10100f;
}
.menu a{
	color: #e2e3e4;
	text-decoration: none;
	display: block;
	padding: 0 1px;
}
.menu a:hover{
	background-color: #10100f;
}
.menu li>a{
	background-color: #10100f;
}
.menu li>a:hover{
	background-color: #e9e9e8;
	color: #10100f;
}
.menu>ul{
	line-height: 30px;
	font-size: 12px;
	display: none;
}
.menu li{
	border-top: 1px solid #222221;
}
/* 导航栏结束 */

/* 标签部分开始 */
.top_nav{
	height: 35px;
	line-height: 30px;
}
.top_nav li{
	display: none;
	background-color: #ccc;
	border-radius: 5px 5px 0 0;
	list-style: none;
	padding: 0 5px;
	margin: 5px 0 0 10px;
	float: left;
}
.top_nav li a{
	color: #000;
	text-decoration: none; 
}
/* 标签部分结束 */

/* 内容部分开始 */
.message{
	margin-right: 5px;
	width: 88%;
	float: right;
}

.message>div{
	height: 510px;
	background-color: purple;
	display: none;
}
/* 内容部分结束 */

/* 选择样式 */
.select{
	background-color: red !important;
}

/* 显示样式 */
.show{
	display: block !important;
}

/* 底部 */
.footer{
	font-size: 12px;
	line-height: 30px;
	text-align: center;
	background-color: #ccc;
	height: 30px;
}

 JS代码

 

$(function() {

	/*左侧导航栏*/
	$(".menu a").click(function() {
		if($(this).parent().children('ul').css("display") == "none") {
			$(".menu ul").hide(100);
			$(this).parent().children('ul').show(200);
		}else {
			$(this).parent().children('ul').hide(200);
		}
	});

	/*找到对应标签并显示*/
	var $navItems = $(".menu li");
	for(var i = 0; i < $navItems.length; i++) {
		$navItems.eq(i).click(function() {
			$this = $(this);
			for(var j = 0; j < $navItems.length; j++) {
				if($this.html() == $navItems.eq(j).html()) {
					/*显示标签*/
					$(".top_nav li").eq(j).addClass('show').addClass("select").siblings('li').removeClass("select");
					/*显示内容并隐藏其他div*/
					$(".message div").eq(j+1).addClass("show").siblings('div').removeClass("show");
				}
			}
		});
	}

	/*标签点击事件*/
	$(".top_nav li").click(function() {
		/*添加选中样式并清除其他兄弟节点的选中样式*/
		$(this).addClass("select").siblings('li').removeClass("select");
		/*显示对应的内容并隐藏兄弟节点对应的内容*/
		$(".message div").eq($(this).index()+1).addClass("show").siblings('div').removeClass("show");
	});

	$(".top_nav li img").click(function(event) {
		var $liItem = $(this).parent('a').parent('li')
		/*隐藏标签*/
		$liItem.removeClass("show");
		/*判断关闭的标签是不是当前选择的标签（.select是选择标签对应的css样式）*/
		if($liItem.css('background-color') == $(".select").css('background-color')) {
			//隐藏标签对应的内容
			$(".message div").eq($liItem.index()+1).removeClass("show");
			/*找到所有的标签li*/
			var $allLi = $liItem.parent('ul').children('li');
			/*从后面开始寻找是否有打开的标签，有则调用它的点击事件*/
			for(var i = $allLi.length; i--; i > 0) {
				if($allLi.eq(i).css("display") == $(".show").css("display")) {
					$allLi.eq(i).click();
					break;
				}
				/*没有则显示第一个内容li<欢迎界面>*/
				if(i == 1) {
					$(".hello").addClass('show');
				}
			}
		}
		event.stopPropagation();
	});



})

不足之处

标签和内容是先定义好的，导致标签的顺序是固定的，无法做到晚点击的标签放在最后面

 

 

完成日期：2018/12/02