当前位置:编程学习 > C#/ASP.NET >>

div联动怎么写?默认是第一个div,当鼠标移动到第一个按钮显示第二个div,其他的div隐藏

<div style="margin-top:10px;">
    
            <input id="shangbiao" type="button" value="商标" style="background-color:#3366FF; color:White; height:26px; width:85px"  />
            <input id="zhuanli" type="button" value="专利" style="background-color:#3366FF; color:White; height:26px; width:85px" />
            <input id="zhishi" type="button" value="知识产权" style="background-color:#3366FF; color:White; height:26px; width:85px" />            
    </div>            <asp:Panel ID="pro" runat="server">
        <div style="width:640px;" class="div">
         第一个div     
     </div>
        </asp:Panel>  <asp:Panel ID="sb" runat="server">
        <div style="width:640px;" class="div">
         第二个div     
     </div>
        </asp:Panel>   <asp:Panel ID="zl" runat="server">
        <div style="width:640px;" class="div">
         第3个div     
     </div>
        </asp:Panel>  <asp:Panel ID="zhis" runat="server">
        <div style="width:640px;" class="div">
         第4个div     
     </div>
        </asp:Panel> --------------------编程问答-------------------- vbb --------------------编程问答--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
<script type="text/javascript">
function toggle_div(obj)
{
var divs = document.getElementsByTagName('div');
for(var i=1;i<divs.length;i++)
{
(obj.id==divs[i].id)?divs[i].style.display="":divs[i].style.display="none";
}
}
</script>
 <body>
  <div style="margin-top:10px;">
    
  <input id="shangbiao" type="button" value="商标" style="background-color:#3366FF; color:White; height:26px; width:85px" onmouseover='toggle_div(this)'/>
  <input id="zhuanli" type="button" value="专利" style="background-color:#3366FF; color:White; height:26px; width:85px" onmouseover='toggle_div(this)'/>
  <input id="zhishi" type="button" value="知识产权" style="background-color:#3366FF; color:White; height:26px; width:85px" onmouseover='toggle_div(this)'/>   
  </div> <asp:Panel ID="pro" runat="server">
  <div style="width:640px;" class="div" >
  第一个div   
  </div>
  </asp:Panel> <asp:Panel ID="sb" runat="server">
  <div style="width:640px;" class="div" id="shangbiao" style='display:"none"'>
  第二个div   
  </div>
  </asp:Panel> <asp:Panel ID="zl" runat="server">
  <div style="width:640px;" class="div" id="zhuanli" style='display:"none"'>
  第3个div   
  </div>
  </asp:Panel> <asp:Panel ID="zhis" runat="server">
  <div style="width:640px;" class="div" id="zhishi" style='display:"none"'>
  第4个div   
  </div>
  </asp:Panel>
 </body>
</html>
--------------------编程问答-------------------- 给4个div加一个父div,id为ds,然后代码如下:

$(function () {
            $("#ds>div:first").show().siblings().hide();

            $("#zhuanli").mouseover(function () {
                $("#ds>div:eq(1)").show().siblings().hide();
            });

        })

用的jquery,只写了一个div的事件,其余类似
补充:.NET技术 ,  C#
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,