javascript初学,点击图片显示隐藏信息,求帮忙看一下我的代码的问题
想做的效果是点击图片,显示隐藏的信息,再点击一下图片,把信息隐藏起来,javascript的内容在独立的.js文件里,求帮忙看一下我的代码问题在哪里.js文件里的代码为f...
想做的效果是点击图片,显示隐藏的信息,再点击一下图片,把信息隐藏起来,javascript的内容在独立的.js文件里,求帮忙看一下我的代码问题在哪里
.js文件里 的代码为
function HiddenInfoDisplay (divDisplay)
{
document.getElementByClassName("image").onclick=function (divDisplay)
{
if(document.getElementById(divDisplay).style.display !="block")
{
document.getElementById(divDisplay).style.display = "block";
}
else
{
document.getElementById(divDisplay).style.display = "none";
}
}
}
html里有<script type="text/javascript" src="./HiddenInfoDisplay.js"></script>,
<a><img src="./Bill.jpg" value="Staff 1" onClick=" return HiddenInfoDisplay('s1')" style="cursor:pointer;" class="image" ></a></div>
</div>
<div id="s1" style="display:none;">
在线等,求帮忙 展开
.js文件里 的代码为
function HiddenInfoDisplay (divDisplay)
{
document.getElementByClassName("image").onclick=function (divDisplay)
{
if(document.getElementById(divDisplay).style.display !="block")
{
document.getElementById(divDisplay).style.display = "block";
}
else
{
document.getElementById(divDisplay).style.display = "none";
}
}
}
html里有<script type="text/javascript" src="./HiddenInfoDisplay.js"></script>,
<a><img src="./Bill.jpg" value="Staff 1" onClick=" return HiddenInfoDisplay('s1')" style="cursor:pointer;" class="image" ></a></div>
</div>
<div id="s1" style="display:none;">
在线等,求帮忙 展开
4个回答
展开全部
你的东西写得有点乱,逻辑不清楚:
首先你是想隐藏图片、还是包括图片的a
function 的参数使用和传递乱
<script language="javascript">
function changeDisplay(obj) {
var display = obj.style.display
obj.style.display = display!="block"?"block":"none"
}
</script>
<img src="./Bill.jpg" value="Staff 1" onClick=" changeDisplay(this)" style="cursor:pointer;" class="image">
稍微改了下,changeDisplay 使用各中标签,onClick=" changeDisplay(this)";this表示把当前标签的对象做参数传给changeDisplay方法
你想隐藏s1的div?
function changeDisplay() {
var obj = document.getElementById("s1"); // 取到s1的对象即可
var display = obj.style.display
obj.style.display = display!="block"?"block":"none"
}
追问
不是隐藏图片,而是图片下面有一些相关信息,要隐藏的是那些信息,点击图片,显示隐藏的信息,再点击图片,把信息隐藏起来,只有图片,最开始也是只显示图片,信息是隐藏着的
追答
事件触发,如按钮、链接、图片在不在要隐藏的内容中
隐藏内容,是不是全部包含在一个容器中,如div
给你做了小例子,自己试试吧image的加上
<script language="javascript">
function changeDisplay(id) {
var obj = document.getElementById(id);
var display = obj.style.display
obj.style.display = display!="block"?"block":"none"
}
</script>
</head>
<body>
<input type="button" value="隐藏/显示s1" onclick="changeDisplay('s1')"/> <br/>
<a href="javascript:void(0)" onclick="changeDisplay('s2')">隐藏/显示s2</a>
<div id="s1" style="display:none;"> 我的div s1 </div>
<div id="s2" style="display:none;"> 我的div s2 </div>
</body>
展开全部
function HiddenInfoDisplay (divDisplay) {
if (document.getElementById(divDisplay).style.display != "block") {
document.getElementById(divDisplay).style.display = "block";
} else {
document.getElementById(divDisplay).style.display = "none";
}
}
----------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
<script type="text/javascript" src="./HiddenInfoDisplay.js"></script>
</head>
<body>
<div>
<a> <img src="./Bill.jpg" value="Staff 1"
onclick="HiddenInfoDisplay('s1')" style="cursor: pointer;"
class="image" /> </a>
</div>
<div id="s1" style="display: none;">dddddddddddddddd</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function fs(divDisplay) {
if (document.getElementById(divDisplay).style.display == "none") {
document.getElementById(divDisplay).style.display = "block";
}
else {
document.getElementById(divDisplay).style.display = "none";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="button" onclick="fs('s1')" />
<div id="s1" style="display:none;">内容</div>
</div>
</form>
</body>
</html>
应该是你在js那里重复绑定点击事件出错了
<head runat="server">
<title></title>
<script type="text/javascript">
function fs(divDisplay) {
if (document.getElementById(divDisplay).style.display == "none") {
document.getElementById(divDisplay).style.display = "block";
}
else {
document.getElementById(divDisplay).style.display = "none";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="button" onclick="fs('s1')" />
<div id="s1" style="display:none;">内容</div>
</div>
</form>
</body>
</html>
应该是你在js那里重复绑定点击事件出错了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
隐藏信息具体是什么。。。。。
更多追问追答
追问
Name: Bill
ID: 001
Age: 30
Gender: Male
Position: CTO
这些就是隐藏在图片下的信息
追答
你是想当鼠标移到图片的时候,就显示你上面的那些信息,是吗?
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询