求使用jQuery编写一个导航.

请查看源代码（包括javascript,css），该有的都有了
http://home.mir2.sdo.com/NewWeb/Include/top1.asp

解决方案 »

  1.   

    页面上有5个img控件, 当我鼠标移动到img1的时候,img1显示,img2,img3,img4,img5都隐藏,依此类推.用jquery怎么做这种判断?   
      

  2.   

    你可以用div实现,把图片放在div中,然后控制div的显示就可以了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
        <script type="text/javascript">
        function ImageSwitch(sName)
        {
            switch(sName)
            {
                case "image1":
                    var divs=document.getElementsByTagName("div");
                    for(i=0;i<divs.length;i++)
                    {
                        if(divs[i].id=="div1")
                        {
                            document.getElementById(divs[i].id).style.display="block";
                        }
                        else
                        {
                            document.getElementById(divs[i].id).style.display="none";
                        }
                    }
                    break;
                case "image2":
                    var divs=document.getElementsByTagName("div");
                    for(i=0;i<divs.length;i++)
                    {
                        if(divs[i].id=="div2")
                        {
                            document.getElementById(divs[i].id).style.display="block";
                        }
                        else
                        {
                            document.getElementById(divs[i].id).style.display="none";
                        }
                    }
                    break;
                case "image3":
                    var divs=document.getElementsByTagName("div");
                    for(i=0;i<divs.length;i++)
                    {
                        if(divs[i].id=="div3")
                        {
                            document.getElementById(divs[i].id).style.display="block";
                        }
                        else
                        {
                            document.getElementById(divs[i].id).style.display="none";
                        }
                    }
                    break;
                case "image4":
                    var divs=document.getElementsByTagName("div");
                    for(i=0;i<divs.length;i++)
                    {
                        if(divs[i].id=="div4")
                        {
                            document.getElementById(divs[i].id).style.display="block";
                        }
                        else
                        {
                            document.getElementById(divs[i].id).style.display="none";
                        }
                    }
                    break;
                case "image5":
                    var divs=document.getElementsByTagName("div");
                    for(i=0;i<divs.length;i++)
                    {
                        if(divs[i].id=="div5")
                        {
                            document.getElementById(divs[i].id).style.display="block";
                        }
                        else
                        {
                            document.getElementById(divs[i].id).style.display="none";
                        }
                    }
                    break;
            }
        }
        </script>
    </head>
    <body><div id="div1" style="display:none">Image1</div>
    <div id="div2" style="display:none">Image2</div>
    <div id="div3" style="display:none">Image3</div>
    <div id="div4" style="display:none">Image4</div>
    <div id="div5" style="display:none">Image5</div>    <a href="image1" name="image1" onmouseover="ImageSwitch(this.name)" >Image1</a> 
        <a href="image2" name="image2" onmouseover="ImageSwitch(this.name)" >Image2</a> 
        <a href="image3" name="image3" onmouseover="ImageSwitch(this.name)" >Image3</a> 
        <a href="image4" name="image4" onmouseover="ImageSwitch(this.name)" >Image4</a> 
        <a href="image5" name="image5" onmouseover="ImageSwitch(this.name)" >Image5</a> 
    </body>
    </html>