23分求 javascript 的简单问题

javascript 的简单问题 刚刚开始学javascript<!--div1-->
<div id=“d1” style="width:100px; height:30px;"></div>
<!--div2-->
<div id=“d2” style="width:100px; height:30px;"></div>
<!--div3-->
<div id=“d3” style="width:100px; height:30px;"></div>
<asp:Panel ID="p1"  runat="server" style="width:750px; height:260px; "></asp:Panel>
<asp:Panel ID="p2"  runat="server" style="width:750px; height:260px; "></asp:Panel>
<asp:Panel ID="p3"  runat="server" style="width:750px; height:260px; "></asp:Panel>
我想用js实现，当鼠标放到第一个DIV  d1的时候 p1这个span就显示其余的p2 p3隐藏以此类推当鼠标放到第二个DIV的时候第二个span p2也就是显示p1  p3就隐藏。怎么实现的呢?JS应该怎么写呢？  

解决方案 »

  1.   

    <script type="text/javascript">
    <!--
    var oldObj;
    function kk (curObjId) {
    var curObj = document.getElementById(curObjId);
    if (oldObj) {
    oldObj.style.display="none"
    }
    curObj.style.display="block";
    oldObj = curObj;
    }
    //-->
    </script>
    <body>
    <!--div1-->
    <div id="d1" style="width:100px; height:30px;" onmouseover="kk('<%= p1.ClientID %>')">d1</div>
    <!--div2-->
    <div id="d2" style="width:100px; height:30px;" onmouseover="kk('<%= p2.ClientID %>')">d2</div>
    <!--div3-->
    <div id="d3" style="width:100px; height:30px;" onmouseover="kk('<%= p3.ClientID %>')">d3</div>
    <asp:Panel ID="p1" runat="server" style="width:750px; height:260px; display:none; ">1</asp:Panel>
    <asp:Panel ID="p2" runat="server" style="width:750px; height:260px; display:none; ">2</asp:Panel>
    <asp:Panel ID="p3" runat="server" style="width:750px; height:260px; display:none; ">3</asp:Panel>
    </body>
      

  2.   

    <script type="text/javascript">
    function f1()
    {
    document.getElementById("p1").style.display='block';
    document.getElementById("p2").style.display='none';
    document.getElementById("p3").style.display='none';
    }
    </script>
    使用onmouseover事件  调用js    我们学习的是jsp  不知道使用否
      

  3.   


    <!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>无标题页</title>
        <script>
            var fun = function(num){
                for(var i = 1 ;i<=3 ;i++){
                    document.getElementById("p"+i).style.display="none";
                }
                document.getElementById("p"+num).style.display="block";
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    <!--div1-->
        <div id=“d1” style="width:100px; height:30px;" onmouseover="fun(1)">d1</div>
    <!--div2-->
    <div id=“d2” style="width:100px; height:30px;" onmouseover="fun(2)">d2</div>
    <!--div3-->
    <div id=“d3” style="width:100px; height:30px;" onmouseover="fun(3)">d3</div>
    <asp:Panel ID="p1" runat="server" style="width:750px; height:260px; ">p1</asp:Panel>
    <asp:Panel ID="p2" runat="server" style="width:750px; height:260px; ">p2</asp:Panel>
    <asp:Panel ID="p3" runat="server" style="width:750px; height:260px; ">p3</asp:Panel>
        </form>
    </body>
    </html>这样吧 ？
      

  4.   


    怎么初始化让第一个span  默认是显示的呢？然后。2.3.4.5sapn是隐藏的？
      

  5.   

    style="display:none;"
    隐藏 。
      

  6.   

    楼上的几位回答都是真确的,但是为什么,我鼠标放到第一个DIV的时候，p1不会显示呢？