Question

我想有一个类似于Windows标签控件的网页。在页面，回发等之间移动时，每个网页都不会丢失内容和数据。

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

[母版页]

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

点击“Fruits”将转发到“Fruits”页面，其他链接（标签）也相同
用户使用“水果”页面搜索水果，填写一些字段等。
然后用户移动到“汽车”页面，然后填写一些字段等来建立自己的汽车
然后用户再次返回“水果”页面 - ＆gt;用户在“水果”页面上看到她/他离开的页面。

除了使用javascript之外，请建议一些好方法：history.go（-1）。这有可能实现吗？

Answer 1

使用Jquery post方法我们可以做同样的事情......让我们试试这个，这里有一个样本给你...

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

此处TabClick（“var”）是一个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>

Answer 2

Twitter bootstrap api非常适合HTML用户界面，查看他们的标签，认为你会找到你想要的东西

http://twitter.github.com/bootstrap/javascript.html#tabs

Answer 3

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

Answer 4

这绝对是可能的，一个非常简单的解决方案是拥有4个div并隐藏/显示对应于用户点击的链接的div“例如：Fruits链接将显示水果div”这种管道已经是对于大多数JavaScript库，一个很好的是Jquery UI框架，选项卡控件将实现您想要做的事情

查看jQuery演示和文档，它可以很容易地通过ajax获得客户端选项卡。

http://jqueryui.com/demos/tabs/

http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/

如果使用3方javascript库不适合你，那么总有一种简单的旧javascript显示/隐藏div的方式

http://webdesign.about.com/od/dhtml/a/aa101507.htm

Answer 5

最简单的方法是渲染所有标签的所有内容，并使用Javascript切换客户端的不同标签（通过调整css属性“display”是一种方式）。没有理由进行AJAX调用，除非您需要提交更新另一个选项卡的数据才能显示。

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

5 个答案: