点击标题显示相应内容

ゝ一纸荒年。 2022-05-19 00:43 136阅读 0赞

点击标题显示相应内容的功能就是将页面分成上下两部分，其中上面部分全都是标题，可能会有多个标题。下面部分就是标题的内容部分，根据标题部分的选中情况展示对应标题的内容。因为本功能是静态页面，所以实现原理依然是控制页面的显示和隐藏。在实际应用中也会有这样的场景，但是如果应用场景是实时读取后台内容建议不要使用这种方式。

同样的节奏，先上预览图，再上代码，然后对代码进行讲解。因为后面会对内容进行讲解，所以就不在代码中添加注释了。不想在代码中添加注释的原因是，代码中有很多重复的代码，添加注释会让代码更长，我这里不想让代码占据文章太多的内容，所以我希望代码更加简短。我这里有两套代码，第二套代码比较简洁，第一套代码比较简单。我先奉上简单版本的代码，主要讲解简单版本的这套代码。

预览图：

![70][]

![70 1][]

简单版代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>区域导航</title>
    <style type="text/css">
    	.selected{float: left;width: 198px;text-align: center;background-color: #3A5FCD;cursor: pointer;border: 1px solid white;}
    	.unselect{float: left;width: 198px;text-align: center;background-color: #6495ED;cursor: pointer;border: 1px solid white;}
    </style>
    <script type="text/javascript">
    	function showInfo(objId){
    		if(objId=="junior"){
    			document.getElementById("pri").className ="unselect";
    			document.getElementById("jun").className ="selected";
    			document.getElementById("sen").className ="unselect";
    			document.getElementById("uni").className ="unselect";
    			document.getElementById("primary").style.display="none";
    			document.getElementById("junior").style.display="block";
    			document.getElementById("senior").style.display="none";
    			document.getElementById("university").style.display="none";
    		}else if(objId=="senior"){
    			document.getElementById("pri").className ="unselect";
    			document.getElementById("jun").className ="unselect";
    			document.getElementById("sen").className ="selected";
    			document.getElementById("uni").className ="unselect";
    			document.getElementById("primary").style.display="none";
    			document.getElementById("junior").style.display="none";
    			document.getElementById("senior").style.display="block";
    			document.getElementById("university").style.display="none";
    		}else if(objId=="university"){
    			document.getElementById("pri").className ="unselect";
    			document.getElementById("jun").className ="unselect";
    			document.getElementById("sen").className ="unselect";
    			document.getElementById("uni").className ="selected";
    			document.getElementById("primary").style.display="none";
    			document.getElementById("junior").style.display="none";
    			document.getElementById("senior").style.display="none";
    			document.getElementById("university").style.display="block";
    		}else{
    			document.getElementById("pri").className ="selected";
    			document.getElementById("jun").className ="unselect";
    			document.getElementById("sen").className ="unselect";
    			document.getElementById("uni").className ="unselect";
    			document.getElementById("primary").style.display="block";
    			document.getElementById("junior").style.display="none";
    			document.getElementById("senior").style.display="none";
    			document.getElementById("university").style.display="none";
    		}
    	}
    </script>
    </head>
    <body>
    	<div style="position: absolute;top: 50px;left: 100px;width: 800px;">
    		<div id="title" style="width: 800px;font-size: 26px;height: 40px;line-height: 38px;">
    			<div id="pri" class="selected" onclick="showInfo('primary')">小学</div>
    			<div id="jun" class="unselect" onclick="showInfo('junior')">初中</div>
    			<div id="sen" class="unselect" onclick="showInfo('senior')">高中</div>
    			<div id="uni" class="unselect" onclick="showInfo('university')">大学</div>
    		</div>
    		<div id="content" style="width: 800px;background-color: #D1EEEE;padding-top: 10px;">
    			<div id="primary" style="display: block;">
    				小学（Primary school），是人们接受初等正规教育的学校，是基础教育的重要组成部分。
    				随着社会发展，在其前又开设了幼儿园。一般6－12岁为小学适龄儿童，现阶段小学阶段教育的年限为6年，有些地方仍是5年。
    				小学教育阶段后为中学教育阶段。
    			</div>
    			<div id="junior" style="display: none;">
    				初中（Junior high school），是初级中学的简称。初中是中学阶段的初级阶段，初级中学一般是指九年义务教育的中学，
    				是向高级中学过渡的一个阶段，属于中等教育的范畴。
    			</div>
    			<div id="senior" style="display: none;">
    				高中（Senior high school），是高级中学的简称，我国中学分为初级中学与高级中学，其中高中属于高级中等教育的范畴。
    				高级中学是我国九年义务教育结束后更高等的教育机构，上承初中，下启大学，一般为三年制。
    				中国的高中教育指初中以后的高级中等教育，包括：普通高中、成人高中、职业高中、中等专业学校、中级技工学校等，
    				均属于高级中等教育的范畴。
    			</div>
    			<div id="university" style="display: none;">
    				大学（University），学名为普通高等学校，是一种功能独特的文化机构，
    				是与社会的经济和政治机构既相互关联又鼎足而立的传承、研究、融合和创新高深学术的高等学府。
    				它不仅是人类文化发展到一定阶段的产物，它还在长期办学实践的基础上，
    				经过历史的积淀、自身的努力和外部环境的影响，逐步形成了一种独特的大学文化 。
    			</div>
    		</div>
    	</div>
    </body>
    </html>

思路讲解：

1、首先我为标题栏定义了两套样式selected和unselect。selected表示当前正文栏中显示的就是该标题的内容，也就是颜色会比较深一些。标题栏一共四块内容，小学、初中、高中、大学。正文栏中也有四块内容分别对应四个标题。

2、然后定义方法showInfo。根据调用时所传的参数将标题栏被点击的标题样式变成selected，其他的标题样式全变成unselect，这里运用的js去改变元素的className从而改变元素的class样式属性。被点击标题对应的内容显示，其他标题对应的内容全部隐藏。

3、最后四个标题的onclick事件都调用showInfo方法，传入的参数分别是标题所对应的内容的id。

思路就是如此。上面的代码每个if判断的代码基本是一样的，所以后面的一套代码进行了优化，直接一样的操作在进方法时就统一执行了，然后在if判断里面做该做的操作就可以了。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>区域导航</title>
    <style type="text/css">
    	.selected{float: left;width: 198px;text-align: center;background-color: #3A5FCD;cursor: pointer;border: 1px solid white;}
    	.unselect{float: left;width: 198px;text-align: center;background-color: #6495ED;cursor: pointer;border: 1px solid white;}
    </style>
    <script type="text/javascript">
    	function showInfo(objId){
    		document.getElementById("pri").className ="unselect";
    		document.getElementById("jun").className ="unselect";
    		document.getElementById("sen").className ="unselect";
    		document.getElementById("uni").className ="unselect";
    		document.getElementById("primary").style.display="none";
    		document.getElementById("junior").style.display="none";
    		document.getElementById("senior").style.display="none";
    		document.getElementById("university").style.display="none";
    		if(objId=="junior"){
    			document.getElementById("jun").className ="selected";
    			document.getElementById("junior").style.display="block";
    		}else if(objId=="senior"){
    			document.getElementById("sen").className ="selected";
    			document.getElementById("senior").style.display="block";
    		}else if(objId=="university"){
    			document.getElementById("uni").className ="selected";
    			document.getElementById("university").style.display="block";
    		}else{
    			document.getElementById("pri").className ="selected";
    			document.getElementById("primary").style.display="block";
    		}
    	}
    </script>
    </head>
    <body>
    	<div style="position: absolute;top: 50px;left: 100px;width: 800px;">
    		<div id="title" style="width: 800px;font-size: 26px;height: 40px;line-height: 38px;">
    			<div id="pri" class="selected" onclick="showInfo('primary')">小学</div>
    			<div id="jun" class="unselect" onclick="showInfo('junior')">初中</div>
    			<div id="sen" class="unselect" onclick="showInfo('senior')">高中</div>
    			<div id="uni" class="unselect" onclick="showInfo('university')">大学</div>
    		</div>
    		<div id="content" style="width: 800px;background-color: #D1EEEE;padding-top: 10px;">
    			<div id="primary" style="display: block;">
    				小学（Primary school），是人们接受初等正规教育的学校，是基础教育的重要组成部分。
    				随着社会发展，在其前又开设了幼儿园。一般6－12岁为小学适龄儿童，现阶段小学阶段教育的年限为6年，有些地方仍是5年。
    				小学教育阶段后为中学教育阶段。
    			</div>
    			<div id="junior" style="display: none;">
    				初中（Junior high school），是初级中学的简称。初中是中学阶段的初级阶段，初级中学一般是指九年义务教育的中学，
    				是向高级中学过渡的一个阶段，属于中等教育的范畴。
    			</div>
    			<div id="senior" style="display: none;">
    				高中（Senior high school），是高级中学的简称，我国中学分为初级中学与高级中学，其中高中属于高级中等教育的范畴。
    				高级中学是我国九年义务教育结束后更高等的教育机构，上承初中，下启大学，一般为三年制。
    				中国的高中教育指初中以后的高级中等教育，包括：普通高中、成人高中、职业高中、中等专业学校、中级技工学校等，
    				均属于高级中等教育的范畴。
    			</div>
    			<div id="university" style="display: none;">
    				大学（University），学名为普通高等学校，是一种功能独特的文化机构，
    				是与社会的经济和政治机构既相互关联又鼎足而立的传承、研究、融合和创新高深学术的高等学府。
    				它不仅是人类文化发展到一定阶段的产物，它还在长期办学实践的基础上，
    				经过历史的积淀、自身的努力和外部环境的影响，逐步形成了一种独特的大学文化 。
    			</div>
    		</div>
    	</div>
    </body>
    </html>

如有什么好的建议或者意见可以进行评论。希望各位朋友在写完自己的代码之后再回头看看自己的代码是否足够简洁。如果好几个判断里面的代码基本一致，说明你的代码急需进行优化。可能你的代码思路是足够简单，但是页面加载和解析js代码是需要时间的，这会影响到页面响应时间。上面同样功能的一个方法，优化之前39行，优化之后23行。所以我先给各位两点建议：1、代码要尽量简洁；2、在代码的关键部位一定要加上注释。

[70]: /images/20220519/96f6388a8c44486f86b0d24b98c7beb6.png
[70 1]: /images/20220519/85204c9581f6489fb50f162341aebd49.png