HTML CSS选项卡菜单

我正在使用Google Engine for a class，并且我对css选项卡式菜单有疑问。我发现了一个教程标签菜单，这里是链接到一个，如果它的问题：HTML CSS选项卡菜单

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

如果任何人知道的方式来让这个它没有重新加载我想知道每次点击菜单中的链接时都会显示该页面。基本上它已经有内存中的信息，只更改文本，或只刷新页面的特定部分。我不知道你可能需要什么类型的东西，但我基本上完全复制了该代码，并使用应用程序引擎和模板继承来获取不同的页面信息。让我知道你是否需要其他信息。提前致谢。

WWaldo

来源

2011-02-18 WWaldo

注意，马克说，他的解决方案是纯CSS3，但事实并非完全正确。没有JavaScript，它不起作用。请阅读Tim Bray的文章，Nick提到并且不会为破坏网络做出贡献。 –

这是可能的，是的 - gawker最近切换到使用这种方法。 Here's Tim Bray的一篇文章介绍了它是如何工作的以及为什么它不是一个好主意。

来源

2011-02-18 04:28:32

我可以建议使用JavaScript至少两种可能性;你既可以针对朝着你的CSS菜单项的链接：

改变的内容（例如，src属性的值）主iframe元素（例如）的，或暴露/更换加载的内容为/出div元素;和/或
触发对服务器的AJAX调用以确定更新，并动态更新所需组件的内容（例如，div）。

区别在于预加载所有页面内容第一（1），而不是在命令（2）上动态访问它。如果您无法控制服务器以在建议（2）中实现AJAX，则（1）就足够了，但需要将工作（和下载）卸载到客户端。

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

来源

2011-02-18 03:20:53 sharky

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

下面是我的例子的一些截图。（我截尾我的名字的URL，我八分他们） Page One Page Two Page Three

所有你要做的就是让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非常异常。

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

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

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

来源

2014-05-11 15:14:48 Ben

您可以根据需要添加其他样式。即链接样式，使链接看起来不错。 – Ben

HTML CSS选项卡菜单

回答

相关问题