原文出自: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通过点击超链接右边(指定位置)显示一个图标的更多相关文章

  1. 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  2. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  3. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  5. .net web 点击链接在页面指定位置显示DIV的问题

    做了一个网页,放了两个DataList ,一个显示科室,一个显示科室中的人员,由于科室太多,一屏显示不全,为了在页面刷新时记住上次浏览位置,所以给页面加了MaintainScrollPositionO ...

  6. 解决使用 Eruda 绑定 dom 未在指定位置显示问题

    前言 开发项目中,使用到 Eruda 打印控制台信息显示 文档:https://github.com/liriliri/eruda 安装 Eruda npm install eruda --save ...

  7. $.messager.show扩展:指定位置显示

    扩展了个$.messager.showBySite,根据舍得的位置显示$.messager.show.代码如下: /** * 指定位置显示$.messager.show * options $.mes ...

  8. js控制div是否显示

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

随机推荐

  1. OpenStack 业务链networking-sfc介绍 (2) - 底层原理

    原文链接:https://blog.csdn.net/bc_vnetwork/article/details/65630475 1.  SFC底层实现原理 port chain和ovs driver/ ...

  2. windows挂载网络盘

    @echo offset filename=%DATE:~0,4%%DATE:~5,2%%DATE:~8,2%set filename="DataBak-%filename%"ne ...

  3. (转)科普:SATA、PCIe、AHCI、NVMe

    原文链接:https://forum.51nb.com/thread-1670848-1-1.html IT 界总喜欢发明新名词.而且同一个东西,可能有几个不同的名字.同一个名字,又可能指不同的东西. ...

  4. 【OCP 12c】最新CUUG OCP-071考试题库(64题)

    64.(22-7) choose the best answer: View the Exhibit and examine the structure of the ORDERS and ORDER ...

  5. “全栈2019”Java第九十一章:内部类具有多态特性吗?

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. python 快速幂求斐波那契数列

    先占坑 后面再写详细的 import numpy as np def pow(n): a = np.array([[1,0],[0,1]]) b = np.array([[1,1],[1,0]]) n ...

  7. 如何自己写aspx过狗D盾一句话木马

    hi,我是凉风,(以下内容纯属个人见解,如有不同的意见欢迎回复指出) ,本菜比发现aspx过狗的姿势不常见,不像php一样一抓一大把,于是我决定研究一下aspx 本文作者:i春秋签约作家——凉风 引用 ...

  8. YC全球总裁:我招揽陆奇好多年,如今终于如愿了!

    简评:YC 老大多年来一直在努力招揽陆奇,终于如愿了. YC 总裁 Sam Altman 在 8 月 14 日,发布了关于陆奇以及 YC 中国的公告,全文如下: 我非常荣幸地宣布,陆奇加入 YC 并且 ...

  9. 数学规划求解器lp_solve超详细教程

    前言 最近小编学了运筹学中的单纯形法.于是,很快便按奈不住跳动的心.这不得不让我拿起纸和笔思考着,一个至关重要的问题:如何用单纯形法装一个完备的13? 恰巧,在我坐在图书馆陷入沉思的时候,一位漂亮的小 ...

  10. 架构师养成记--20.netty的tcp拆包粘包问题

    问题描述 比如要发ABC DEFG HIJK 这一串数据,其中ABC是一个包,DEFG是一个包,HIJK是一个包.由于TCP是基于流发送的,所以有可能出现ABCD EFGH 这种情况,那么ABC和D就 ...