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

原文出自：https://blog.csdn.net/seesun2012


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

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


**index.html 页面** ``` 《点击超链接显示图标》案例 ```
**caidan.html 页面** ``` 通过点击超链接右边显示一个铅笔图标 
<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>
``` ![原始状态](//img-blog.csdn.net/20161121191123726)![点击后出现铅笔图标](//img-blog.csdn.net/20161121191218117)
附上百度云盘源码：http://pan.baidu.com/s/1eS3bKjS     提取码：0bl0
**如果此文章对你有帮助，请不要吝啬你的点赞！**
posted @ 2018-06-22 18:11  seesun2012  阅读(1419)  评论(0)  编辑  收藏  举报