下面是一段可以在静态网页中显示栏目收缩的代码

1.Javascript代码


window.onload
= function() {
    hiddenlinks();
}

function hiddenlinks() {
     var displaystr = null;
     var stylestr = null;

     for(n =1; n < 100; n++){
          if(n <10)
                displaystr = 'hidden0' + n;
          else
               displaystr = 'hidden' + n;
               stylestr =  document.getElementById(displaystr);
          if(stylestr != null)
               stylestr.style.display = "none";
          else
               break;
     }
}

function showhidden(num) {
     if (document.getElementById(num).style.display == "none") {
          document.getElementById(num).style.display = "block";
          document.images["arrow" + num].src = "image/arrow-closed.gif";
     } else {
          document.getElementById(num).style.display = "none";
          document.images["arrow"+num].src = "image/arrow-open.gif";
     }
}

2.HTML代码

<html>
<head>......<script type="text/javascript" src="visibility.js"></script>....</head>
<body>
........
      <div>
         <a onclick="showhidden('hidden01');" >
             <img src="image/arrow-open.gif" alt=" " name="arrowhidden01" width="10" height="10" border="0" style="float: left;">一级栏目
        </a>
        <img src="image/hot.gif" width="30" height="13">
     </div>
     <div>
         <ul>
             <li><a href="#">下拉栏目一</a></li>
             <li><a href="#">下拉栏目二</a></li>
          </ul>
       </div>
........
</body>
</html>


posted on 2006-03-16 13:24  cheerwen  阅读(760)  评论(0编辑  收藏  举报