master

分支 (2)

管理

管理

master

dev_test

web-test
/
html左侧菜单.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			.outer {
				height: 1000px;
				width: 100%;
			}

			.menu {
				height: 500px;
				width: 30%;
				background: antiquewhite;
			}

			.title {
				background: cornflowerblue;
				line-height: 40px;
			}

			.hide {
				display: none;
			}

			hr {
				line-height: 10px;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="menu">
				<div class="item">
					<div class="title" onclick="show(this)"> 菜单一</div>
					<div class="con">
						<div>111</div>
						<div>222</div>
						<div>333</div>
					</div>
				</div>
				<hr>
				<div class="item">
					<div class="title" onclick="show(this)"> 菜单二</div>
					<div class="con hide">
						<div>111</div>
						<div>222</div>
						<div>333</div>
					</div>
				</div>
				<hr>
				<div class="item">
					<div class="title" onclick="show(this)"> 菜单三</div>
					<div class="con hide">
						<div>111</div>
						<div>222</div>
						<div>333</div>
					</div>
				</div>

			</div>
			<div class="content"></div>
		</div>
	</body>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		function show(self) {
			$(self).next().removeClass("hide");
			$(self).parent().siblings().children(".con").addClass("hide")
		}
	</script>
</html>