asp.net实现简单Tab页

最新推荐文章于 2014-03-15 10:41:01 发布
最新推荐文章于 2014-03-15 10:41:01 发布
阅读量1.7k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： 【.Net】Web技巧 文章标签： asp.net button webform iframe server asp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leoup/article/details/2241839
本文介绍了在Web开发中如何使用iframe实现简单的Tab页效果。通过创建一个主页面TabForm.aspx，放置两个按钮作为Tab标签，并根据按钮点击切换iframe的src属性，展示WebForm1和WebForm2两个子页面内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

       在C/S模式下，经常采用Tab分页的方式来做，然后将不同的信息放到不同的Tab页中，然后可以点击页签去查看不同页面中的内容。在Web开发中，也需要用到这样的Tab页，实现的方式有很多种，现在来介绍一种简单的Tab页的实现方式：用iframe来实现。
       具体步骤是：先建立一个主TabForm.aspx,在上面放两个按钮来模拟页签（今后也可以用Photoshop来制作更精美的图片来作Tab标签），然后再建立两个子Form，WebForm1，WebForm2，当按钮被按下的时候来切换IFRAME的src属性去显示不同的子页面。 

具体代码如下：

TabForm.aspx

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <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>
    <form id="form1" runat="server">
    <div>
        <asp:button id="Button1" style="Z-INDEX: 101;  POSITION: absolute; TOP: 24px; width:100px;" runat="server" 
Text="WebFrom1Tab" CssClass="aaa" OnClick="Button1_Click"></asp:button> 
        <asp:Button id="Button2" style="Z-INDEX: 102;  POSITION: absolute; TOP: 25px; left: 111px;width:100px;" runat="server" 
Text="WebFrom2Tab" CssClass="bbb" OnClick="Button2_Click"></asp:Button> 
        <iframe id="IFRAME1" style="BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid; Z-INDEX: 103; 
LEFT: 11px; BORDER-LEFT: 0px solid; WIDTH: 924px; BORDER-BOTTOM: 0px solid; POSITION: absolute; TOP: 47px; HEIGHT: 555px" 
runat="server"></iframe> 
    </div>
    </form>
</body>
</html>

TabForm.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class TabForm : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        IFRAME1.Attributes.Add("src", "Webform1.aspx"); 

    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        IFRAME1.Attributes.Add("src", "Webform2.aspx"); 

    }
}

 

 代码下载：

Asp.net中自定义Tab控件
qq_39656138的博客
11-29 720
背景： 续写原生JS中Tab切换,在Asp.net中也会经常用到类似前端的Tab切换的效果，但是使用前端的无论是原生还是jq的写法都不能很好的实现这些效果，其中因为在每个Tab中使用定义不同的控件，由于控件的事件在执行的时候都会触发PageLoad事件所以无法很好的定位到tab中的某个内容页，所以就想着前端如果不行就考虑着自定义Tab控件，但是效果并不好，同样还是因为在不同的Tab页中的事件原因...
在asp.net网页中实现tabPage功能（下）
Dahlia
03-19 4418
  在上一篇文章中提到了用asp.net自带的MultiView+Menu实现tabPage，功能实现了，但总感觉在外观上与真正的tabPage相差较大。如果你是网页美工高手，那么你可以通过某些手段改变它们的外观，使它尽量和Windows程序里的TabPage相接近，但本人还真不懂怎么弄，真是对不住大家！话说回来，如果你知道怎么调整，那么请不吝赐教！毕竟我也是个新手，先谢谢了！下面介绍一下怎样加入
ASP.NET网页Tab选项卡控件源码及示例
03-16
内容索引:.NET源码,控件组件,选项卡,控件　　一个用C#编写的用于网页的TAB选项卡控件源代码，并附有一个使用示例，包括在静态环境下的一个HTML示例，TAB选项卡如图示，效果很不错，部分功能使用了JQUERY配合，这使得操作体验更舒服。
asp.net 实现TabPage
weixin_30911451的博客
12-23 234
VS2005里建立一个网站，在他的控件中是没有TabPage这个控件的，TabPage只有在WinForm开发时才有，但是我们做的网页有时候却很需要用一个TabPage控件。这个时候我们采用下面这个方法实现一个TabPage控件的效果。 我们通过menu和MultiView+View组合使用来实现asp.net2.0中的TabPage效果。 1。在需要实现TabPage的页面上...
asp.net tab
u012709815的专栏
03-15 940
在asp.net网页中实现tabPage功能——来自一位网友   2011-09-07 20:53:11|  分类： .Net系列 |  标签：asp.net   |举报 |字号 订阅   第一种方法是用Menu控件+MultiView控件实现： 第一步是在网页中拖入一个Menu控件，编辑一下项目，并设置一下它的属性通常要把Orientation属性设为H
asp.net ASPxTextBox等控件实现回车模拟Tab的 常用代码整理
01-21
今天我要实现一些编辑框如ASPxTextBox、ASPxComboBox等控件回车模拟Tab的功能。这没办法，用户用惯了回车，讨厌按Tab来移动焦点（鼠标点击更麻烦）。 以ASPxTextBox为例，在ClientSideEvents属性中可设置许多客户端...
商业编程-源码-Asp.net2.0实现简易菜单Tab切换.zip
06-20
在本资源中，我们关注的是一个使用Asp.net2.0技术实现的简易菜单Tab切换功能。Asp.net是微软公司推出的一种强大的Web应用程序开发框架，它极大地简化了Web开发的复杂性，允许开发者快速构建功能丰富的动态网站和Web...
asp.net多页签页面切换
05-06
在ASP.NET开发中，实现多页签页面切换是一种常见的用户界面设计，它可以提供更好的用户体验，让用户在一个页面上浏览和操作多个相关的内容区域。本篇将详细介绍如何在ASP.NET环境中实现这样的功能，主要涉及的知识点...
ASP.NET实现类似网易126邮箱TAB界面.rar
07-09
ASP.NET模仿的126邮箱TAB界面，可以换皮肤、其中住框架、具体页面可以统一使用皮肤。 tab页标题有右键菜单，新开、全屏打开，刷新。双击标题也可以刷新。可以收放菜单栏。 使用方法： 基本上主框架页面不需要作任何的变动了，直接就可以用，就不讲了。 在这里主要讲一下使用tabControl： tabControl新开一个页面实际上是通过JS在主显示区域建立一个iframe 把这个iframe的src 指向我们指定的页面。
web页面制作tab选项卡
09-28
用于学习 web页面制作tab选项卡 将鼠标停靠在TabPage控件头上时显示的工具提示
在asp.net网页中实现tabPage功能（上）
Dahlia
03-17 6167
  我是个.net新手，所以我写的东西在好些高手们看来似乎比较粗浅，还请大家海涵！并希望大家多多指导、多提意见，我会十分感激的，谢谢！  前几天在做一个项目时，项目经理非要让我在asp.net网页中实现类似Windows Form程序中类似TabControl(TabPage)那样的功能，但大家都知道，asp.net中是不提供这种控件的，那如何实现呢？  第一种方法是用Menu控件+Mul
asp.net 多页Tab功能
liugy1126的专栏
03-25 9381
 搜索了相关的资料，转载了4种方式，个人感觉第一种最好，不需要用code改变，比较灵活，也很好看。Ajax的现成控件应该也比较好用，不过没有试用。 =========================================方法1： 个人感觉最好，灵活，美观==========================================灵活的Tab页，使用纯H
asp.net的页面，录入控件用回车代替TAB切换的方法。。
李云辉（BrightStar）^_^
12-17 1502
   function JumpToNextBox(){   var dom=document.all;   for(i=0;i   if(dom[i].tagName=="INPUT"&&event.keyCode==13){   if(dom[i].type.toLowerCase()=="text")   event.keyCode=9;   }   }   }
aspnet下Tab选项卡的使用（整理三）
niutianbo的专栏
10-03 552
                                                       文件信息                     声像文件                     图片信息                                                                                 
基于ASP.NET MVC的JQueryUI控件开发(2) - Tab控件设计
李君老师的BLOG
07-23 2133
先上效果图:001.png (大小:18.9 K 下载次数:0)视图代码:002.png (大小:6.2 K 下载次数:0)使用方法:------------------------------------------------------------------Html.Tabs(ID){   Html.Header(){           H
[ASP.NET]制作一个简单的多页Tab功能
12-13 700
我们经常在主页中要浏览分类信息，在C/S模式下，经常采用Tab分页的方式来做，然后将不同的信息放到不同的Tab页中，然后可以点击页签去查看不同页面中的内容。我们可以用网页的IFRAME来实行这个功能，先建立一个主WebForm1,在上面放两个按钮来模拟页签（今后也可以用Photoshop来制作更精美的页签），然后再建立两个子Form,WebForm2,WebForm3，当按钮被按下的时候来切换IF
asp.net 自定义tab控件实现
weixin_30861459的博客
04-13 324
已经完成了tab控件的必要的设计时支持和运行时输出，控件完整代码如下： using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Web.UI.WebControls; using System.Web.UI; using System....
C# ASP.NET 实现Tab功能源码教程
在介绍C#和ASP.NET实现Tab功能的源码之前，我们需要先了解一下相关的知识点。C#是一种面向对象的编程语言，它是.NET框架的核心语言之一，主要用于构建各种应用程序，包括Web应用。ASP.NET则是建立在.NET框架之上的一...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值