Javascript ASP.Net导航选项卡，如windows选项卡控件

我想有一个网页像windows选项卡控件的东西。 每个网页在页面之间移动、回发等时不会丢失内容和数据

以下是网站设计和我的想法：

[母版页]

"Fruits"  "Cars"   "Animals"  "Operators"

单击“水果”将转到“水果”页面，其他链接选项卡也是如此 用户在水果页面上搜索水果，填写一些字段等。 然后用户移动到Cars页面，然后通过填充一些字段等建立自己的汽车 然后用户再次返回到水果页面->用户在水果页面上看到了她/他离开的同一页面。 除了使用javascript:history.go-1之外，请推荐一些好方法。

---

这有可能实现吗

有很多方法可以实现你想做的事情。您可以创建一个用户会话，并向服务器发送AJAX调用，设置输入并对其进行处理。或者，您可以使用一个只有一个页面的单页面应用程序，并在其中导航。可能还有更多。您应该选择哪一个取决于您的项目规范是什么

这是最有可能的，一个非常简单的解决方案是有4个div，并隐藏/显示与用户单击的链接对应的div，例如：Fruits link将显示Fruits div这种管道已经在大多数JavaScript库中使用，一个很好的解决方案是Jquery UI框架，选项卡控件将实现您想要执行的操作

查看jQuery演示和文档，通过ajax创建客户端选项卡非常容易

如果使用3partyJavaScript库不是您的选择，那么总会有一种简单的老javascript方式来显示/隐藏div

---

最简单的方法是呈现所有选项卡的所有内容，并使用Javascript通过调整css属性display在客户端切换不同的选项卡，例如，这是一种方法。没有理由进行AJAX调用，除非您需要在显示另一个选项卡之前提交更新该选项卡的数据。

Twitter引导api非常适合HTML UI，请查看它们的选项卡，您会找到您想要的

---

使用Jquery post方法，我们也可以这样做。。。让我们试试这个，这是给你的样品

<div class="Tabclass" id="TabId1" onclick="TabClick('Fruits')">
        Fruits
    </div>
  <div class="activeTab" id="TabId2" onclick="TabClick('cars')">
        cars
    </div>

这里TabClickvar是一个javascript函数，parametr用于标识选择了哪个选项卡

假设包含div的数据的id是DivMainContent。让我们看看javascript函数

<script type="text/javascript">
           function TabClick(bType) {
               $(#DivMainContent").html("");
               if (bType == 'Fruits') {
                         $.post("@Url.Content("~/Controllername/actionname")",
                         function (data) {
                         $("#DivMainContent").html(data);
                    });
               }
               else if (bType == 'cars') {

                          $.post("@Url.Content("~/Controllername/actionname")",
                          function (data) {
                          $("#DivMainContent").html(data);
                    });
 }
</script>