0

我想要一个类似于 Windows 选项卡控件的网页。每个网页在页面之间移动、回发等时不会丢失内容和数据。

这是网站设计和我的想法：

[母版页]

"Fruits"  "Cars"   "Animals"  "Operators"
  • 点击“水果”将跳转到“水果”页面，其他链接（标签）也是如此
  • 用户在“水果”页面上搜索水果，填写一些字段等。
  • 用户然后移动到“汽车”页面，然后通过填写一些字段等来建立自己的汽车
  • 然后用户再次返回“Fruits”页面 -> 用户看到她/他在“Fruits”页面上离开的同一页面。

请提出一些除使用 javascript:history.go(-1) 之外的好方法。这有可能实现吗？

4

5 回答 5

3

使用 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函数，参数是标识选择了哪个选项卡。

假设包含 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>
于 2012-10-11T11:27:47.490 回答
2

Twitter bootstrap api 非常适合 HTML UI，看看他们的标签，你会发现它是你要找的

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

于 2012-10-03T22:03:15.953 回答
1

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

于 2012-10-01T03:32:07.393 回答
1

绝对有可能，一个非常简单的解决方案是拥有 4 个 div 并隐藏/显示与用户单击的链接相对应的 div “例如：水果链接将显示水果 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/

如果您不适合使用 3party javascript 库，那么总是有简单的旧 javascript 方式来显示/隐藏 div

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

于 2012-10-01T03:34:26.210 回答
1

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

于 2012-10-01T03:34:42.237 回答