在 ASP.NET 中设计选项卡的简单方法
4.92/5 (28投票s)
本文将展示如何使用按钮、MultiView 控件和 CSS 在 ASP.NET 页面中创建选项卡。
引言
这是在 ASP.NET 页面中使用按钮、MultiView 控件和 CSS 显示选项卡的另一种方法。
背景
在 ASP.NET 中实现选项卡有很多方法，无需使用 AJAX 控件。
但是，许多解决方案使用 ASP.NET 菜单控件或自定义控件来显示选项卡。
此外，使用 ASP.NET 菜单控件，无法突出显示选定的选项卡。 这就是我提出一种使用命令按钮、CSS 和少量后端代码来显示选项卡的简单方法。
它是如何工作的？
这非常容易实现。
基本上会有两种 CSS 样式。
一种样式将具有初始背景图像，另一种样式将具有不同的背景图像以突出显示活动选项卡。 在每次按钮单击时，按钮的 CSS 样式将从代码隐藏处更新。
以下是理解这些步骤的简单方法：
1. 使用两张图片，一张用于初始样式，另一张用于显示选定的选项卡。（我使用画图工具创建这些图片。 不需要太多技巧）
（初始显示）
（显示在选定的按钮上）
2. 创建两种不同的样式，一种用于初始显示（.Initial 和 .Initial:hover - 在鼠标指针移动到按钮上时更改样式），另一种用于显示选定的选项卡（.Clicked）。
<style type="text/css">
.Initial
{
display: block;
padding: 4px 18px 4px 18px;
float: left;
background: url("../Images/InitialImage.png") no-repeat right top;
color: Black;
font-weight: bold;
}
.Initial:hover
{
color: White;
background: url("../Images/SelectedButton.png") no-repeat right top;
}
.Clicked
{
float: left;
display: block;
background: url("../Images/SelectedButton.png") no-repeat right top;
padding: 4px 18px 4px 18px;
color: Black;
font-weight: bold;
color: White;
}
</style>
3. 为每个选项卡创建 ASP.NET 按钮，并将背景图像设置为初始样式。
a. 对于每个按钮，请确保将 **BorderStyle** 设置为“**None**”，以便它看起来像一个图像，而不是一个按钮。
4. 创建一个 Multi View 控件和与每个选项卡对应的不同视图。
<body style="font-family: tahoma">
<form id="form1" runat="server">
<table width="80%" align="center">
<tr>
<td>
<asp:Button Text="Tab 1" BorderStyle="None" ID="Tab1" CssClass="Initial" runat="server"
OnClick="Tab1_Click" />
<asp:Button Text="Tab 2" BorderStyle="None" ID="Tab2" CssClass="Initial" runat="server"
OnClick="Tab2_Click" />
<asp:Button Text="Tab 3" BorderStyle="None" ID="Tab3" CssClass="Initial" runat="server"
OnClick="Tab3_Click" />
<asp:MultiView ID="MainView" runat="server">
<asp:View ID="View1" runat="server">
<table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
<tr>
<td>
<h3>
<span>View 1 </span>
</h3>
</td>
</tr>
</table>
</asp:View>
<asp:View ID="View2" runat="server">
<table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
<tr>
<td>
<h3>
View 2
</h3>
</td>
</tr>
</table>
</asp:View>
<asp:View ID="View3" runat="server">
<table style="width: 100%; border-width: 1px; border-color: #666; border-style: solid">
<tr>
<td>
<h3>
View 3
</h3>
</td>
</tr>
</table>
</asp:View>
</asp:MultiView>
</td>
</tr>
</table>
</form>
</body>
5. 在每次按钮单击时，将单击按钮的样式设置为采用新值。
public partial class SimpleTabControl : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
Tab1.CssClass = "Clicked";
MainView.ActiveViewIndex = 0;
}
}
protected void Tab1_Click(object sender, EventArgs e)
{
Tab1.CssClass = "Clicked";
Tab2.CssClass = "Initial";
Tab3.CssClass = "Initial";
MainView.ActiveViewIndex = 0;
}
protected void Tab2_Click(object sender, EventArgs e)
{
Tab1.CssClass = "Initial";
Tab2.CssClass = "Clicked";
Tab3.CssClass = "Initial";
MainView.ActiveViewIndex = 1;
}
protected void Tab3_Click(object sender, EventArgs e)
{
Tab1.CssClass = "Initial";
Tab2.CssClass = "Initial";
Tab3.CssClass = "Clicked";
MainView.ActiveViewIndex = 2;
}
}
6. 最后，您可以获得所需的样式。（请使用附件中的 Zip 文件获取代码）
结论
这是显示选项卡和突出显示活动选项卡的另一种简单方法。