我想有一个类似于Windows标签控件的网页。 在页面,回发等之间移动时,每个网页都不会丢失内容和数据。
以下是网站设计和我的想法:
[母版页]
"Fruits" "Cars" "Animals" "Operators"
除了使用javascript之外,请建议一些好方法:history.go(-1)。 这有可能实现吗?
答案 0 :(得分: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函数,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>
答案 1 :(得分:2)
Twitter bootstrap api非常适合HTML用户界面,查看他们的标签,认为你会找到你想要的东西
答案 2 :(得分:1)
有很多方法可以实现您想要做的事情。您可以进行用户会话并将AJAX调用发送到服务器设置输入并进行处理。或者您可以使用单页面应用程序,其中您只有一个页面并在其中导航。可能还有更多。您应该选择哪一个取决于您的项目规格。
答案 3 :(得分:1)
这绝对是可能的,一个非常简单的解决方案是拥有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的方式
答案 4 :(得分:1)
最简单的方法是渲染所有标签的所有内容,并使用Javascript切换客户端的不同标签(通过调整css属性“display”是一种方式)。没有理由进行AJAX调用,除非您需要提交更新另一个选项卡的数据才能显示。