[ASP.NET]制作一個簡單的多頁Tab功能
2024-07-10 12:56:42
供稿：網友
我們經常在主頁中要瀏覽分類信息，在c/s模式下，經常采用tab分頁的方式來做，然后將不同的信息放到不同的tab頁中，然后可以點擊頁簽去查看不同頁面中的內容。我們可以用網頁的iframe來實行這個功能，先建立一個主webform1,在上面放兩個按鈕來模擬頁簽（今后也可以用photoshop來制作更精美的頁簽），然后再建立兩個子form,webform2,webform3，當按鈕被按下的時候來切換iframe的src屬性去顯示不同的子頁面。具體代碼如下：
webform1.aspx
<%@ page language="c#" codebehind="webform1.aspx.cs" autoeventwireup="false" inherits="iframetest.webform1" %>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en" >
<html>
<head>
<title>webform1</title>
<meta content="microsoft visual studio .net 7.1" name="generator">
<meta content="c#" name="code_language">
<meta content="javascript" name="vs_defaultclientscript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetschema">
<style>.aaa {
border-top-style: none; border-right-style: none; border-left-style: none; background-color: #ffcc33; border-bottom-style: none
}
.bbb {
border-top-style: none; border-right-style: none; border-left-style: none; background-color: #99ffcc; border-bottom-style: none
}
</style>
</head>
<body ms_positioning="gridlayout">
<form id="form1" method="post" runat="server">
<asp:button id="button1" style="z-index: 101; left: 16px; position: absolute; top: 24px" runat="server"
text="button" cssclass="aaa"></asp:button>
<asp:button id="button2" style="z-index: 102; left: 72px; position: absolute; top: 24px" runat="server"
text="button" cssclass="bbb"></asp:button>
<iframe id="iframe1" style="border-right: 0px solid; border-top: 0px solid; z-index: 103; left: 16px; border-left: 0px solid; width: 648px; border-bottom: 0px solid; position: absolute; top: 40px; height: 288px"
runat="server"></iframe>
</form>
</body>
</html>
webform1.aspx.cs
.
.
.
private void button1_click(object sender, system.eventargs e)
{
iframe1.attributes.add("src","webform2.aspx");
}
private void button2_click(object sender, system.eventargs e)
{
iframe1.attributes.add("src","webform3.aspx");
}
