显示隐藏页面内容的通用方法

<script type="text/javascript" language="javascript">  
/**
* 显示或者隐藏页面内容
* 显示时具有img ID元素的样式类名为:showImg
* 隐藏时具有img ID元素的样式类名为:hiddenImg
*
* @idCode: 要显示或者隐藏的页面元素id
* @hiddenImg: 隐藏时相应的图片路径(如向下的箭头)
* @showImg: 显示内容时相应的图片路径(如向上的箭头)
*/
function displayHiddenArea(idCode,hiddenImg,showImg)
{  
    var imgId = "img" + idCode;
    var contentId = "content" + idCode;
   
    if (document.getElementById(contentId).style.display == "none")
    {
        document.getElementById(contentId).style.display = "block";
       
        //判断是使用图片路径,还是使用样式类名
        if (showImg == null)
            document.getElementById(imgId).className = "showImg";
        else
            document.getElementById(imgId).src = showImg;
    }
    else
    {
        document.getElementById(contentId).style.display = "none";
       
        if (hiddenImg == null)
            document.getElementById(imgId).className = "hiddenImg";
        else
            document.getElementById(imgId).src = hiddenImg;
       
    }
}

  </script>
   
    <style type="text/css">
    .showImg
    {
        background-image:url(../Images/share/ico-up.gif);
        padding:0 5px;
    }
   
    .hiddenImg
    {
        background-image:url(../Images/share/ico-Descend.gif);
        padding:0 5px;
    }
    </style>

你可能感兴趣的:(JavaScript,css,UP)