[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");
}
