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">--------------------编程问答-------------------- 给4个div加一个父div,id为ds,然后代码如下:
<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>
$(function () {
$("#ds>div:first").show().siblings().hide();
$("#zhuanli").mouseover(function () {
$("#ds>div:eq(1)").show().siblings().hide();
});
})
用的jquery,只写了一个div的事件,其余类似
补充:.NET技术 , C#