<div id="div_img">
                  
                            <div class="" style="display: none" id='img3'>
                                <img alt="线路图" src='files/gp=0.jpg' />
                                <img alt="时间表" src='files/sjb3.jpg' />
                            </div>
                    
                            <div class="" style="display: none" id='img2'>
                                <img alt="线路图" src='files/u==0.jpg' />
                                <img alt="时间表" src='files/sjb2.jpg' />
                            </div>
                        
                            <div class="" style="display: none" id='img1'>
                                <img alt="线路图" src='files/u=.jpg' />
                                <img alt="时间表" src='files/sjb.jpg' />
                            </div>
                        
                </div>
        <ul class="lines_list" id="a_link">
                
                            <li><a href="#" id='img3' onclick="a_click(this)">
                               华山3线</a></li>
                   
                            <li><a href="#" id='img2' onclick="a_click(this)">
                               华山2线</a></li>
                 
                            <li><a href="#" id='img1' onclick="a_click(this)">
                               华山1线</a></li>
                        
                </ul>
   function a_click(a_one) {
            var $items = $("#a_link a");
            var items = $items.get()
            for (j = 0; j < items.length; j++) {                if (items[j].innerHTML != a_one.innerHTML) {
                    items[j].parentNode.style.display = "";
                }
                else {
                    items[j].parentNode.style.display = "none";
                    images(a_one.id);
                }            }
        }
        function images(imgone) {
            var items = div_img.childNodes;
            alert(items.length);
            for (i = 0; i < items.length; i++) {
                if (items.item(i).id == imgone) {
                    items.item(i).style.display = "";
                }
                else {
                    items.item(i).style.display = "none";
                }            }        } 
要实现的效果是点击链接,该链接隐藏,和该链接id号相等的div显示,div中的图片显示出来,再点击其他的链接,当前点击的链接隐藏,对应的div中的图片显示,先前隐藏的链接显示,图片隐藏。上面的js在ie中没有问题,在火狐中不起作用,大家看看,是什么问题

解决方案 »

  1.   

    FF下有firedebug啊 下一个 去。
      

  2.   

    lz有用到jquery,那我直接用jq写了
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>无标题页</title>
        <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $("#a_link a").click(function(){
                var index = $("#a_link a").index($(this))
                $(this).parent().css("display","none");
                $(this).parent().siblings().css("display","block");
                $("#div_img div").eq(index).css("display","block");
                $("#div_img div").not($("#div_img div").eq(index)).css("display","none");
            })
        })    </script></head>
    <body>
        <form id="form1" runat="server">
        <div id="div_img">
            <div class="" style="display: none" id='img3'>
                <img alt="线路图3" src='files/gp=0.jpg' />
                <img alt="时间表3" src='files/sjb3.jpg' />
            </div>
            <div class="" style="display: none" id='img2'>
                <img alt="线路图2" src='files/u==0.jpg' />
                <img alt="时间表2" src='files/sjb2.jpg' />
            </div>
            <div class="" style="display: none" id='img1'>
                <img alt="线路图1" src='files/u=.jpg' />
                <img alt="时间表1" src='files/sjb.jpg' />
            </div>
        </div>
        <ul class="lines_list" id="a_link">
            <li><a href="#" id='img3'>华山3线</a></li>
            <li><a href="#" id='img2'>华山2线</a></li>
            <li><a href="#" id='img1'>华山1线</a></li>
        </ul>
        </form>
    </body>
    </html>
      

  3.   

    jQuery中可以直接使用show,hide的    $(document).ready(function(){
            $("#a_link a").click(function(){
                var index = $("#a_link a").index($(this))
                $(this).parent().hide();
                $(this).parent().siblings().show();
                $("#div_img div").eq(index).show();
                $("#div_img div").not($("#div_img div").eq(index)).hide();
            })
        })