js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

本文链接：https://blog.csdn.net/seesun2012/article/details/53262386

javascript基础篇，老土的方法解决js控制div样式，便于新手理解，粗暴的不能再粗暴，如果你是高手，请忽略！

实现思路：

1.先将div设置为隐藏，style=“display:none”；
2.调用javascript脚本showContent()方法；
3.获取传入的id，document.getElementById()；
4.改变div的样式，block：显示，none：隐藏

index.html 页面

	<a href="caidan.html">《点击超链接显示图标》案例</a>

caidan.html 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>通过点击超链接右边显示一个铅笔图标</title>
   <script type="text/javascript">
		function showContent(getids){
			//必须有id传入
			if (document.getElementById){
				//获取对用id的div容器
				target=document.getElementById(getids);
				var id = getids;
				//复制粘贴，简单粗暴
				var qbOne = "qbOne";
				var qbTwo = "qbTwo";
				var qbThree = "qbThree";
				//判断当前点击的id是否与操作的id保持一致（简单粗暴）
				if(id == qbOne){
					//改变当前显示为隐藏
					 if (target.style.display=="block"){
						target.style.display="none";
					 } else {
						 //改变当前隐藏为显示
						target.style.display="block";
						//第二个(qbTwo)、第三个(qbThree )以及其他图标分别隐藏
						qbTwo = document.getElementById("qbTwo");
						qbTwo.style.display="none";
						qbThree = document.getElementById("qbThree");
						qbThree.style.display="none";
					 }
				}
				else if(id == qbTwo){
					 if (target.style.display=="block"){
						target.style.display="none";
					 } else {
						target.style.display="block";
						//同上，复制粘贴，简单粗暴
						qbOne = document.getElementById("qbOne");
						qbOne.style.display="none";
						qbThree = document.getElementById("qbThree");
						qbThree.style.display="none";
					 }
				}
				else if(id == qbThree){
					 if (target.style.display=="block"){
						target.style.display="none";
					 } else {
						target.style.display="block";
						//同上，复制粘贴，不求甚解
						qbOne = document.getElementById("qbOne");
						qbOne.style.display="none";
						qbTwo = document.getElementById("qbTwo");
						qbTwo.style.display="none";
					 }
				}
				else{
					//如果没有id就返回一个空
					return null;
				}
			}
		}
	</script>

	<style type="text/css">
		/* ===建议使用一行样式，这里可修改图片和图标，不作解释=== */
		#caidan {width:377px;border:0px solid red;height:231px;background:url(img/caidanbanzi.png);background-repeat:repeat-y;margin-top:50px;margin-left:50px;text-decoration:none;}

		/* 第一个菜单 */
		#ttOne {align:center;width:203px;;border:0px solid red;text-align:center;margin-top:30px;margin-left:50px;float:left;text-decoration:none;}
		#qbOne {background-image:url(img/qianbi.png); width:74px;height:73px;float:left;border:0px solid red;margin-top:-30px; display:none; }

		/* 第二个菜单 */
		#ttTwo {align:center;width:203px;cursor:url(img/qianbi.png);border:0px solid red;text-align:center;margin-top:50px;margin-left:50px;float:left;text-decoration:none;}
		#qbTwo {background-image:url(img/qianbi.png);width:74px;height:73px;float:left;border:0px solid red;margin-top:-10px; display:none; }

		/* 第三个菜单 */
		#ttThree {align:center;width:203px;cursor:url(img/qianbi.png);border:0px solid red;text-align:center;margin-top:40px;margin-left:50px;float:left;text-decoration:none;}
		#qbThree {background-image:url(img/qianbi.png);width:74px;height:73px;float:left;border:0px solid red;margin-top:-10px; display:none; }

		/* ... */

	</style>

</head>

<body>
	<!-- 简单粗暴,不求甚解 -->
	<div id="caidan">
		<a id="ttOne" href="javascript:showContent('qbOne')">甲状腺腔镜手术</a>
		<div id="qbOne"></div>

		<a id="ttTwo" href="javascript:showContent('qbTwo')">甲状腺手术中喉返神经探测仪的应用</a>
		<div id="qbTwo"></div>

		<a id="ttThree" href="javascript:showContent('qbThree')">甲状腺疾病患者应该多补充碘吗？</a>
		<div id="qbThree"></div>
		
	</div>



	<br />	
	<img src="img/qianbi.ico" width="19" height="14" style="cursor:pointer;" onclick="top.history.back()" />
	<input type="button" onclick="history.go(-1)" value="返回上一页">
	<a href="javascript:history.go(-1)" >返回</a>

</body>
</html>