4

シンプルな 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";
    }
}
4

2 に答える 2

3

シンプルな Javascript を使用しsrcて、2 つの矢印の間で画像の属性を変更すると同時に、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>
于 2012-07-09T02:38:13.873 に答える
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>
于 2012-07-09T09:54:25.500 に答える