js实现目录的隐藏和显示

最新推荐文章于 2022-10-10 17:12:20 发布

Amily_an

最新推荐文章于 2022-10-10 17:12:20 发布

阅读量553

点赞数

分类专栏： js 文章标签： js css html5

本文链接：https://blog.csdn.net/Amily_an/article/details/105215607

版权

js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

废话不多说，直接上代码，都浅显易懂，所以没有写注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>目录的隐藏和显示</title>
		<style type="text/css">
			ol,
			ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}

			.directory_div {
				width: 200px;
				background-color: #FFFAF0;
				border: 1px solid #DADADA;
				text-align: center;
				margin: 0 auto;
			}

			.tab_title {
				display: block;/* 实现span的设置，不加这个 span不能设置大小 */
				font-weight: bold;
				font-size: 17px;
				width: 100%;
				background-color: lemonchiffon;
				cursor: pointer;
			}

			.hidden_div {
				display: none;
			}

			.block_div {
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="directory_div">
			<ul class="tab_nav">
				<li>
					<span class="tab_title" onclick="displayOrNone('first_tab');">第一章</span>
					<div id="first_tab" class="hidden_div">
						<ul>
							<li>1.1</li>
							<li>1.2</li>
							<li>1.3</li>
						</ul>
					</div>
				</li>
				<li>
					<span class="tab_title" onclick="displayOrNone('second_tab');">第二章</span>
					<div id="second_tab" class="hidden_div">
						<ul>
							<li>2.1</li>
							<li>2.2</li>
							<li>2.3</li>
						</ul>
					</div>
				</li>
				<li>
					<span class="tab_title" onclick="displayOrNone('third_tab');">第三章</span>
					<div id="third_tab" class="hidden_div">
						<ul>
							<li>3.1</li>
							<li>3.2</li>
							<li>3.3</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			function displayOrNone(id) {
				if (document.getElementById(id).className == "hidden_div") {
					document.getElementById(id).className = "block_div";
				} else {
					document.getElementById(id).className = "hidden_div"
				}
			}
		</script>
		
	</body>
</html>