请问如何实现点击span下面的a显示出来

代码如下：
<div id="left2">
<ul>
<li class="collapse""><span onClick=expand()>技术类职位</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">JSP高级软件工程师</a>
<a href="http://tools.dynamicdrive.com/favicon/">Mysql工程师</a>
<a href="http://www.dynamicdrive.com/emailriddler/">技术项目经理</a>
<a href="http://tools.dynamicdrive.com/password/">测试工程师</a>
<a href="http://tools.dynamicdrive.com/gradient/">桌面支持工程师</a>
<a href="http://tools.dynamicdrive.com/button/">JSP系统构架工程师</a>
</li>
</div>
在css中设置a的display属性为none实现隐藏，如何点击最上面的文字即技术类职位然后a显示出来？
DOM中的对象调用不是很清楚

解决方案 »

  1.   

    把你的所有的A，用一个DIV包上
    <div id="xx">
    <a></a>
    <a></a>
    </div>直接控制DIV显示不显示就可以了，别控制A了
      

  2.   


    <html>
    <head>
    <title></title>
    <style></style>
    <script type="text/javascript">
    function expand(){
    document.getElementById('container').style.display = 'block';
    }
    </script>
    </head>
    <body>
    <span onClick="expand()">技术类职位 </span> 
    <div id='container' style="display:none">
    <a class="hide" href="http://tools.dynamicdrive.com/imageoptimizer/">JSP高级软件工程师 </a> 
    <a class="hide" href="http://tools.dynamicdrive.com/favicon/">Mysql工程师 </a> 
    <a class="hide" href="http://www.dynamicdrive.com/emailriddler/">技术项目经理 </a> 
    <a class="hide" href="http://tools.dynamicdrive.com/password/">测试工程师 </a> 
    <a class="hide" href="http://tools.dynamicdrive.com/gradient/">桌面支持工程师 </a> 
    <a class="hide" href="http://tools.dynamicdrive.com/button/">JSP系统构架工程师 </a> 
    </div>
    </li> </body>
    </html>
      

  3.   

    你好我刚才运行过代码确实可以，谢谢！
    你把所有的a都放在div中，在原先的代码改为
    <script language="javascript">
    function expand（）{
    document.getElementbyId(‘container’).style.display="block";}
    </script>
    <ul>
    <li class="collapse" id="container"> <span onClick=expand()>技术类职位 </span>
    <a href="http://tools.dynamicdrive.com/imageoptimizer/">JSP高级软件工程师 </a>
    <a href="http://tools.dynamicdrive.com/favicon/">Mysql工程师 </a>
    <a href="http://www.dynamicdrive.com/emailriddler/">技术项目经理 </a>
    <a href="http://tools.dynamicdrive.com/password/">测试工程师 </a>
    <a href="http://tools.dynamicdrive.com/gradient/">桌面支持工程师 </a>
    <a href="http://tools.dynamicdrive.com/button/">JSP系统构架工程师 </a>
    </li>
    为什么运行不了呢
      

  4.   

    是这样的：
    <html>
    <script language="javascript">
     function expand(){
       document.getElementById('container').style.display='block';}
    </script>
    <span onClick="expand()">技术类职位</span>
    <div id="container" style="display:none">
    <a href="http://tools.dynamicdrive.com/imageoptimizer/">JSP高级软件工程师</a>
    <a href="http://tools.dynamicdrive.com/favicon/">Mysql工程师</a>
    <a href="http://www.dynamicdrive.com/emailriddler/">技术项目经理</a>
    <a href="http://tools.dynamicdrive.com/password/">测试工程师</a>
    <a href="http://tools.dynamicdrive.com/gradient/">桌面支持工程师</a>
    <a href="http://tools.dynamicdrive.com/button/">JSP系统构架工程师</a>
    </div>
    </html>
    在FF下可以运行，当改成
    <style type="text/css">
    a{display:none;}
    </style>
    <script language="javascript">
     function expand(){
       document.getElementById('container').style.display='block';}
    </script>
    <span onClick="expand()">技术类职位</span>
    <div id='container'>
    <a href="http://tools.dynamicdrive.com/imageoptimizer/">JSP高级软件工程师</a>
    <a href="http://tools.dynamicdrive.com/favicon/">Mysql工程师</a>
    <a href="http://www.dynamicdrive.com/emailriddler/">技术项目经理</a>
    <a href="http://tools.dynamicdrive.com/password/">测试工程师</a>
    <a href="http://tools.dynamicdrive.com/gradient/">桌面支持工程师</a>
    <a href="http://tools.dynamicdrive.com/button/">JSP系统构架工程师</a></div>
    就不可以运行的，CSS的两种表示方法导致结果能否运行，为什么呢