我有一个使用简单JavaScript的简单隐藏/取消隐藏div部分。我需要一个箭头图像,它会在点击时切换内容可见性,并且我希望当内容被隐藏和取消隐藏时,小箭头在右/下位置之间切换。
HTML内容:
<a href="javascript:showOrHide();"><img src="Image_Files/Copyright.png" alt="BioProtege Inc" border="0" /></a>
<img src="Image_Files/Copyright_Arrow_Hidden.png" alt="Arrow" border="0" />
<div id="showorhide">
Copyright 2012+ BioProtege-Inc.Net | LG Fresh Designz
<br />
Contact Us @ Lane.Gross@Edu.Sait.Ab.Ca
</div>
JavaScript内容:
function showOrHide()
{
var div = document.getElementById("showorhide");
if (div.style.display == "block")
{
div.style.display = "none";
}
else
{
div.style.display = "block";
}
}
答案 0 :(得分:3)
您只需使用简单的Javascript更改两个箭头之间的图片src
属性,同时更改display
属性:
<script type="text/javascript">
function showOrHide()
{
var div = document.getElementById("showorhide");
if (div.style.display == "block")
{
document.getElementById("img-arrow").src = "Image_Files/arrow-hidden.jpg";
div.style.display = "none";
}
else
{
div.style.display = "block";
document.getElementById("img-arrow").src = "Image_Files/arrow-showing.jpg";
}
}
</script>
<img src="arrow-hidden.jpg" id="img-arrow" alt="" />
<div id="showorhide">
Copyright 2012+ BioProtege-Inc.Net | LG Fresh Designz
<br />
Contact Us @ Lane.Gross@Edu.Sait.Ab.Ca
</div>
答案 1 :(得分:2)
即使答案已经被接受了:) 另一种方法是使用Google的jQuery轮换(此示例只需要“向上箭头”图像):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var value = 0
$("img").click(function(){
$("#showorhide").toggle();
value +=180;
$(this).rotate({ animateTo:value});
});
});
</script>
</head>
<body>
<img src="arrow.jpg" alt="BioProtege Inc" border="0" id="myimg" name="myimg" />
<div id="showorhide">
Copyright 2012+ BioProtege-Inc.Net | LG Fresh Designz
<br />
Contact Us @ Lane.Gross@Edu.Sait.Ab.Ca
</div>
</body>
</html>