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

最新推荐文章于 2024-12-05 18:19:01 发布

最新推荐文章于 2024-12-05 18:19:01 发布 · 85 阅读

文章标签：

#c# #xhtml #ui

本文介绍如何使用VS2008和C#实现网页上的Tab标签切换效果，通过ASP.NET Button控件和后台CS代码来动态控制不同Tab的内容显示与隐藏。

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