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://pan.baidu.com/s/1eS3bKjS 提取码:0bl0
**如果此文章对你有帮助,请不要吝啬你的点赞!**
js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标的更多相关文章
- 功能整合(一):滚动条的变相隐藏、js控制div的渐变显示、滚动条监听
1.滚动条的变相隐藏 思路: 1. 把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2. 然后把最外层的div的宽设置的比body的宽宽一点,把d ...
- JS控制DIV隐藏显示
转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- .net web 点击链接在页面指定位置显示DIV的问题
做了一个网页,放了两个DataList ,一个显示科室,一个显示科室中的人员,由于科室太多,一屏显示不全,为了在页面刷新时记住上次浏览位置,所以给页面加了MaintainScrollPositionO ...
- 解决使用 Eruda 绑定 dom 未在指定位置显示问题
前言 开发项目中,使用到 Eruda 打印控制台信息显示 文档:https://github.com/liriliri/eruda 安装 Eruda npm install eruda --save ...
- $.messager.show扩展:指定位置显示
扩展了个$.messager.showBySite,根据舍得的位置显示$.messager.show.代码如下: /** * 指定位置显示$.messager.show * options $.mes ...
- js控制div是否显示
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
随机推荐
- OpenStack 业务链networking-sfc介绍 (2) - 底层原理
原文链接:https://blog.csdn.net/bc_vnetwork/article/details/65630475 1. SFC底层实现原理 port chain和ovs driver/ ...
- windows挂载网络盘
@echo offset filename=%DATE:~0,4%%DATE:~5,2%%DATE:~8,2%set filename="DataBak-%filename%"ne ...
- (转)科普:SATA、PCIe、AHCI、NVMe
原文链接:https://forum.51nb.com/thread-1670848-1-1.html IT 界总喜欢发明新名词.而且同一个东西,可能有几个不同的名字.同一个名字,又可能指不同的东西. ...
- 【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 ...
- “全栈2019”Java第九十一章:内部类具有多态特性吗?
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- python 快速幂求斐波那契数列
先占坑 后面再写详细的 import numpy as np def pow(n): a = np.array([[1,0],[0,1]]) b = np.array([[1,1],[1,0]]) n ...
- 如何自己写aspx过狗D盾一句话木马
hi,我是凉风,(以下内容纯属个人见解,如有不同的意见欢迎回复指出) ,本菜比发现aspx过狗的姿势不常见,不像php一样一抓一大把,于是我决定研究一下aspx 本文作者:i春秋签约作家——凉风 引用 ...
- YC全球总裁:我招揽陆奇好多年,如今终于如愿了!
简评:YC 老大多年来一直在努力招揽陆奇,终于如愿了. YC 总裁 Sam Altman 在 8 月 14 日,发布了关于陆奇以及 YC 中国的公告,全文如下: 我非常荣幸地宣布,陆奇加入 YC 并且 ...
- 数学规划求解器lp_solve超详细教程
前言 最近小编学了运筹学中的单纯形法.于是,很快便按奈不住跳动的心.这不得不让我拿起纸和笔思考着,一个至关重要的问题:如何用单纯形法装一个完备的13? 恰巧,在我坐在图书馆陷入沉思的时候,一位漂亮的小 ...
- 架构师养成记--20.netty的tcp拆包粘包问题
问题描述 比如要发ABC DEFG HIJK 这一串数据,其中ABC是一个包,DEFG是一个包,HIJK是一个包.由于TCP是基于流发送的,所以有可能出现ABCD EFGH 这种情况,那么ABC和D就 ...