C# 如何在asp.net中显示选项卡控件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9921565/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show tab control in asp.net
提问by user1295417
I am developing a C# .NET web application using .NET Framework 4.0.
我正在使用 .NET Framework 4.0 开发 C# .NET Web 应用程序。
In that, I need to show a page with 3 tabs like our web browsers do. Each tab has a different functionality.
在那，我需要像我们的网络浏览器一样显示一个带有 3 个选项卡的页面。每个选项卡都有不同的功能。
How can I create tab control in Visual Studio using the .NET Framework 4.0, is there any built in tab controls?
如何使用 .NET Framework 4.0 在 Visual Studio 中创建选项卡控件，是否有任何内置选项卡控件？
regards
问候
回答by Tim Medora
There's the AJAX control toolkit tabsand jQuery UI tabs. I have used both and prefer jQuery UI. Microsoft officially includes/recommends jQuery with web applications.
有 AJAX 控件工具包选项卡和jQuery UI 选项卡。我两个都用过，更喜欢 jQuery UI。Microsoft 正式在 Web 应用程序中包含/推荐 jQuery。
If each tab has completely separate content, I would suggest rendering a simple, styled bar of links and have each element link to a new page/view. That way, hidden content isn't rendered until it's needed.
如果每个选项卡都有完全独立的内容，我建议渲染一个简单的、样式化的链接栏，并将每个元素链接到一个新页面/视图。这样，隐藏的内容在需要时才会呈现。
jQuery UI Example
jQuery UI 示例
Note that this doesn't have anything to do with .NET or Visual Studio; this is a purely client-side solution.
请注意，这与 .NET 或 Visual Studio 没有任何关系；这是一个纯粹的客户端解决方案。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">Content 1</div>
<div id="tabs-2">Content 2</div>
<div id="tabs-3">Content 3</div>
</div>
