利用JS来修改display属性的问题

Question

我写的一个JSP的网页，在CSS中定义一个属性#sn { display:none;}然后在JSP网页定义了一个JS函数function showbox(id) 
{
    if(document.getElementById(id).style.display=='none')
         document.getElementById(id).style.display='block';
}然后在网页中有一个循环显示的函数
<%  while(i<20)
    {
%>
        <div id="sn">SN</div>
        <script language="javascript">showbox('sn')</script>
<%
     }
%>我运行网页得到的结果是：第一个循环中的SN结果可以显示出来，可是后面的19个就没有反应了，请问一下这个是什么问题呀？或者怎么用别的方法可以实现一样的功能，主要是用来配合显示勾选查询结果用的。

Answer 1

发现好像是因为ID相同的问题，所以我把所有的都改成用class定义，即
.sn {display:none;}可是出现新的问题，为什么同样的样式定义，我把它放到JSP文件里面就有效果，而从css文件中导入就没有效果了，SN里面我还定义了其他的一些样式，导入用的是：
<link rel="stylesheet" href="./css/sn/css" type="text/css">

Answer 2

这个问题解决，新问题：display:none定义在CSS文件中，当JSP网页运行的时候为什么会没有效果，可是把这个直接定义在JSP文件里面就可以了，也就是<div style="display:none">

Answer 3

CSS对应的元素有没有写对 。
firebug看下样式属性 。

Answer 4

你先直接把样式写在页面上， 而不是css文件中。 看一下有没有效果， 至少保证在页面上有效果了， 再移到css文件中， 这样你调试要方便很多， 容易看出问题

Answer 5

js直接取或者设置外联样式文件中的CSS是取不到的。只能直接取到页面上的样式。

Answer 6

确定一下引用的CSS的路径是否正确。