HTML CSS选项卡菜单

Question

我正在使用Google Engine上课，我对css标签菜单有疑问。我找到了标签菜单的教程，如果重要的话，这里是指向那个的链接：

http://www.marcofolio.net/css/sweet_tabbed_navigation_using_css3.html

我想知道是否有人知道如何制作它以便每次单击菜单中的链接时都不必重新加载页面。基本上它已经在内存中有信息并只更改文本，或只刷新页面的特定部分。我不知道你可能需要什么类型的东西，但我基本上完全复制了这些代码，并使用app引擎和模板继承来获取不同的页面信息。如果您需要其他信息，请告诉我。提前谢谢。

WWaldo

Answer 1

有可能，是的 - gawker最近转向使用这种方法。 Here's Tim Bray关于它如何运作以及为什么这是一个坏主意的帖子。

Answer 2

我可以使用JavaScript建议至少两种可能性;您可以将CSS菜单项中的链接定位到：

1. 更改主src元素的内容（例如，iframe属性的值）（例如），或将预加载的内容显示/更换为div元素（一个或多个）;和/或，
2. 触发对服务器的AJAX调用以确定更新，并动态更新所需组件的内容（例如div）。

不同之处在于首先预加载所有页面内容（1），而不是在命令（2）上动态访问它。如果你没有控制服务器在建议（2）中实现AJAX，那么（1）就足够了，但代价是将工作（和下载）卸载到客户端。

这两种方法都需要使用JavaScript动态更新页面内容。 '网络上充斥着这样的例子;例如，查看this one。

Answer 3

实际上很容易在HTML中制作标签式菜单，使用CSS，我的设计不需要javascript。我在大约1/2个小时内做了这个例子。

以下是我的示例的一些截图。 （我从URL中删除了我的名字，然后我裁剪了他们）

您所做的只是制作3个框，其中包含指向其他网页的链接。它在所有页面中看起来都一样。建议制作圆角。

<div id="Tab1"><a href="Template1.html">Tab Numbah One </a></div><div id="Tab2"><a href="Template2.html">Tab Numbah Two </a></div><div id="Tab3"><a href="Template3.html">Tab Numbah Three </a></div>

进入你的外部CSS表格，让它们全部浮动，并在同一条线上，让它看起来漂亮，你需要某种边界。

然后在每个页面中创建一个重写样式。使底部边框不存在，因此它看起来像活页夹的选项卡。我改变了颜色，所以当你在那个页面上时，它看起来好一点。注意，我非常不正确地缩进我的CSS。

第1页

#Tab1 { border-bottom:none; background-color:white; } 第2页

#Tab2 { border-bottom:none; background-color:white; } 第3页

#Tab1 { border-bottom:none; background-color:white; }