Css+Div的选项卡

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ShowInfo.aspx.cs" Inherits="House_ShowInfo" %>
2

<html xmlns="http://www.w3.org/1999/xhtml" >
3

<head runat="server">
4

<title>无标题页</title>
5

<style>
8

.buttonClose
9

{
10

width:100px;height:25px;
11

border :solid 1px #cccccc;
12

text-align:center;
13

cursor:hand;
14

}
15

.buttonOpen
16

{
17

width:100px;height:25px;text-align:center;
18

border-left:solid 1px #cccccc;
19

border-right:solid 1px #cccccc;
20

border-top:solid 1px #cccccc;
21

background-color:#ffffff;
22

}
23

.panelWorker
24

{
25

background-color:#ffffff;
26

border-left:solid 1px #cccccc;
27

border-right:solid 1px #cccccc;
28

border-bottom:solid 1px #cccccc;
29

}
30

.panelClose
31

{
32

display:none;
33

}
34

.panelOpen
35

{
36

display:;
37

}
38

</style>
39

</head>
40

var buttonIdArray=new Array();
42

buttonIdArray[0]='House_Navigation';
43

buttonIdArray[1]='User_Navigation';
44

buttonIdArray[2]='Server_Navigation';
45

var panelIdArray=new Array();
47

panelIdArray[0]='Panel_House';
48

panelIdArray[1]='Panel_User';
49

panelIdArray[2]='Panel_Server';
50

function __OpenPanel(buttonObject,panelObjectId)
52

{
53

for(var i=0;i<buttonIdArray.length;i++)
54

{
55

var _button=document.getElementById(buttonIdArray[i]);
56

var _panel=document.getElementById(panelIdArray[i]);
57

_button.className="buttonClose";
58

_panel.className="panelClose";
59

}
60

buttonObject.className="buttonOpen";
61

document.getElementById(panelObjectId).className="panelOpen";
62

}
63

</script>
65

<body style="margin:0px 0px 0px 0px;">
66

<form id="form1" runat="server">
67

<table style="width:50%;" cellpadding=0 cellspacing=0 >
68

<tr>
69

<td id="House_Navigation" class="buttonOpen" onclick="__OpenPanel(this,'Panel_House')" style="height: 26px">房管导航</td>
70

<td style="width:5px; border-bottom:solid 1px #cccccc; height: 26px;"> </td>
71

<td id="User_Navigation" class="buttonClose" onclick="__OpenPanel(this,'Panel_User')" style="height: 26px">客户导航</td>
72

<td style="width:5px; border-bottom:solid 1px #cccccc; height: 26px;"> </td>
73

<td id="Server_Navigation" class="buttonClose" onclick="__OpenPanel(this,'Panel_Server')" style="height: 26px">服务导航</td>
74

<td style=" border-bottom:solid 1px #cccccc; height: 26px;"> </td>
75

</tr>
76

<tr>
77

<td colspan="6" class="panelWorker" >
78

<asp:Panel ID="Panel_House" runat="server" Height="50px" Width="100%" BorderColor="#C0C0FF"><asp:Button ID="Button1" runat="server" Text="Button" />a</asp:Panel>
79

<asp:Panel ID="Panel_User" runat="server" CssClass="panelClose" Height="50px" Width="100%" BorderColor="#C0FFC0">
81

<asp:Button ID="Button2" runat="server" Text="Button" />
82

<asp:Button ID="Button3" runat="server" Text="Button" /></asp:Panel>
83

<asp:Panel ID="Panel_Server" runat="server" CssClass="panelClose" Height="50px" Width="100%">
85

<asp:Button ID="Button4" runat="server" Text="Button" />
86

<asp:Button ID="Button5" runat="server" Text="Button" />
87

<asp:Button ID="Button6" runat="server" Text="Button" /></asp:Panel>
88

</td>
89

</tr>
90

</table>
91

</form>
92

</body>
93

</html>
94

posted on 2007-12-22 17:19 笨笨熊（梦幻雨儿）阅读(343) 评论(0) 编辑收藏举报