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>

甲状腺腔镜手术

	<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>

```
![原始状态](http://img.blog.csdn.net/20161121191123726)![点击后出现铅笔图标](http://img.blog.csdn.net/20161121191218117)

附上百度云盘源码：http://pan.baidu.com/s/1eS3bKjS 提取码：0bl0

**如果此文章对你有帮助，请不要吝啬你的点赞！**

巴特西

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

最新文章

热门文章