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>
附上百度云盘源码:http://pan.baidu.com/s/1eS3bKjS 提取码:0bl0
注:以上内容仅提供参考和交流,请勿用于商业用途,如有侵权联系本人删除!
持续更新中…
如有对思路不清晰或有更好的解决思路,欢迎与本人交流,QQ群:273557553,个人微信:
你遇到的问题是小编创作灵感的来源!