如何在asp.net中显示选项卡控件

Question

我正在使用.NET Framework 4.0开发一个C# .NET Web应用程序。

在其中，我需要显示一个带有3个选项卡的页面，就像我们的Web浏览器一样。每个选项卡具有不同的功能。

如何在Visual Studio中使用.NET Framework 4.0创建选项卡控件？是否有内置的选项卡控件可用？

谢谢！

- user1295417

Answer 1

有AJAX控件工具包的选项卡和jQuery UI 选项卡。我已经都试过了，更喜欢 jQuery UI。Microsoft 官方将 jQuery 与 Web 应用程序一起使用/推荐。

如果每个选项卡具有完全不同的内容，我建议渲染一个简单的、带有样式的链接栏，并使每个元素链接到一个新页面/视图。这样，隐藏的内容直到需要时才会被渲染。

jQuery UI 示例

请注意，这与 .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>

- Tim M.

---

老兄，我不想使用Ajax。 - user1295417

那就不用了。我说我更喜欢jQuery选项卡。 - Tim M.

如何在VS 2010中使用jQuery？ - user1295417

要在Visual Studio项目中使用jquery选项卡，请确保您的页面使用脚本标签引用了jquery和jquery UI库，然后按照将HTML元素转换为选项卡的说明操作（jquery UI选项卡文档中有许多示例）。 - Tim M.

我也添加了一个完整的示例。 - Tim M.