VS2008(C#)制作网页Tab标签切换方法（三）——CS后台代码实现


前台HTML代码：

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

<!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>Tab后台CS程序实现</title>

<style type="text/css">

body

{

color: #000000;

background-color: #ffffff;

font-family: Tahoma, 宋体;

font-size: 12px;

margin: 0px;

padding: 0px;

text-align: center;

}

#TabButton1, #TabButton2, #TabButton3

{

margin-top: 20px;

width: 60px;

}

.aaa

{

background-color: #E0E0E0;

}

.bbb

{

background-color: Gray;

color: White;

}

#tab1, #tab2, #tab3

{

width: 188px;

height: 100px;

background-color: #E0E0E0;

overflow: auto;

}

#tab2, #tab3

{

display: none;

}

</style>

</head>

<body>

<form id="form1" runat="Server">

<center>

<div>

<asp:Button ID="TabButton1" runat="server" CssClass="aaa" Text="查询" OnClick="TabButton1_Click" />

<asp:Button ID="TabButton2" runat="server" CssClass="bbb" Text="新建" OnClick="TabButton2_Click" />

<asp:Button ID="TabButton3" runat="server" CssClass="bbb" Text="修改" OnClick="TabButton3_Click" />

</div>

<div id="tab1" runat="Server">

<asp:Label ID="Label1" runat="server" Text="111-查询"></asp:Label>

</div>

<div id="tab2" runat="Server">

<asp:Label ID="Label2" runat="server" Text="222-新建"></asp:Label>

</div>

<div id="tab3" runat="Server">

<asp:Label ID="Label3" runat="server" Text="333-修改"></asp:Label>

</div>

</center>

</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_CS : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{


}

protected void TabButton1_Click(object sender, EventArgs e)

{

tab1.Style.Add("display", "block");

tab2.Style.Add("display", "none");

tab3.Style.Add("display", "none");

TabButton1.CssClass = "aaa";

TabButton2.CssClass = "bbb";

TabButton3.CssClass = "bbb";

}

protected void TabButton2_Click(object sender, EventArgs e)

{

tab1.Style.Add("display", "none");

tab2.Style.Add("display", "block");

tab3.Style.Add("display", "none");

TabButton1.CssClass = "bbb";

TabButton2.CssClass = "aaa";

TabButton3.CssClass = "bbb";

}

protected void TabButton3_Click(object sender, EventArgs e)

{

tab1.Style.Add("display", "none");

tab2.Style.Add("display", "none");

tab3.Style.Add("display", "block");

TabButton1.CssClass = "bbb";

TabButton2.CssClass = "bbb";

TabButton3.CssClass = "aaa";

}

}






具体代码如上，源代码下载：



VS2008（C#）4种方法实现Tab标签灵活切换源码，测试成功！