VS2008(C#)制作网页Tab标签切换方法（四）

VS2008(C#)制作网页Tab标签切换方法（四）——IFrame实现

利用HTML的iframe属性，并结合后台的CS代码实现，具体做法如下：

前台HTML代码：

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

<!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>Main_Page</title>
    <style type="text/css">
        body
        {
            color: #000000;
            background-color: #ffffff;
            font-family: Tahoma, 宋体;
            font-size: 12px;
            margin: 0px;
            padding: 0px;
            text-align: center;
        }
        .aaa
        {
            background-color: #ffcc33;
        }
        .bbb
        {
            background-color: #99ffcc;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style=" margin-top: 20px;">
        <asp:Button ID="Button1" runat="server" CssClass="aaa" Text="文学"
            οnclick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" CssClass="bbb" Text="科技"
            οnclick="Button2_Click" />
        <asp:Button ID="Button3" runat="server" CssClass="bbb" Text="军事"
            οnclick="Button3_Click" />
        <br />
        <iframe id="IFrame" runat="Server" style=" border: solid 1px inherit; width: 300px; height: 500px;">
        </iframe>
    </div>
    </form>
</body>
</html>

后台CS代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Tab_Tab_IFrame_Main_Page : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        IFrame.Attributes.Add("src", "page1.aspx");
        Button1.CssClass = "aaa";
        Button2.CssClass = "bbb";
        Button3.CssClass = "bbb";
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        IFrame.Attributes.Add("src", "page1.aspx");
        Button1.CssClass = "aaa";
        Button2.CssClass = "bbb";
        Button3.CssClass = "bbb";
    }
    protected void Button2_Click(object sender, EventArgs e)
    {
        IFrame.Attributes.Add("src", "page2.aspx");
        Button1.CssClass = "bbb";
        Button2.CssClass = "aaa";
        Button3.CssClass = "bbb";
    }
    protected void Button3_Click(object sender, EventArgs e)
    {
        IFrame.Attributes.Add("src", "page3.aspx");
        Button1.CssClass = "bbb";
        Button2.CssClass = "bbb";
        Button3.CssClass = "aaa";
    }
}

附加说明：

在同一目录下，新建三个ASPX网页，命名依次为: Page1.aspx、 Page1.aspx、 Page1.aspx

具体代码如上，源代码下载： VS2008（C#）4种方法实现Tab标签灵活切换源码，测试成功！

转载于:https://www.cnblogs.com/mixer/archive/2010/01/29/2448267.html

VS2008(C#)制作网页Tab标签切换方法（四）相关推荐

做网页是用dw还是html,教你如何用Dreamweaver制作网页以及保存网页的方法--系统之家...
如何用Dreamweaver(DW)制作网页并保存网页呢?我就在这里教给大家最基础的创建网页和保存网页的方法教程,希望能帮到有需要的朋友. 启动软件后,在左上角点击[文件],在下拉菜单中点击[新建]. ...
html5 css3 卡片切换,HTML5之纯CSS3实现的tab标签切换
HTML5的运用之纯CSS3实现的tab标签切换 CSS3代码实现的tab标签切换 *{padding:0px;margin:0px;} #tab{margin:20px;20px;position: ...
html tab切换jquery,jQuery版Tab标签切换
鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换效果图: 源代码: Tab标签切换 body{ background:#fff;} *{ mar ...
jQuery bind事件练习及tab标签切换的实现
1.bind事件 jQuery部分代码: <script type="text/javascript"> $(document).ready(function(){ ...
如何修改服务器标题,修改DEDECMS网页TITLE标签的方法
修改DEDECMS网页TITLE标签的方法发布时间:2020-08-19 11:40:37 来源:亿速云阅读:87 作者:小新这篇文章主要介绍了修改DEDECMS网页TITLE标签的方法,具有一 ...
JS 实现 Tab标签切换功能
Tab标签切换效果图: HTML部分: <div class="wrap"> <ul id="tag"> < ...
vue2.0 实现tab标签切换效果内容可以自行定义
利用vue2.0 实现tab标签切换效果比较实用初学vue,练习写了一个demo 网上有很多同样的例子,但都只是改text数据,如果我想加入图片或者复杂的dom结构就不实用,今天这个就刚好可以. ...
Google Play网页显示语言切换方法
使用Google Play或者Google Play Console时,有时候需要切换网页的语言.如何进行切换呢? 基本上Google是根据你的IP自动确定网页的显示语言的,因此,修改Google账号 ...
关于element tab标签切换加载闪一下的问题
之前开发就遇到过这个问题,当时解决了也没记录下来,今天来说下这个问题!!! 解决之前的代码如下: <el-tabs v-model="activeName2" type=&q ...
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...

VS2008(C#)制作网页Tab标签切换方法（四）

VS2008(C#)制作网页Tab标签切换方法（四）相关推荐

最新文章

热门文章