简单的 JQuery Tabs 模板

• 下载可用的源代码 - 84.73 KB
• 查看演示

引言

我想知道如何制作一个简单的标签页，我找到了许多不同的解决方案。我尝试了其中一些，但注意到我尝试的一些方案存在一些问题，例如： 

• 页面加载时，有时您会看到所有标签页闪烁一下，然后它们会隐藏（我不太喜欢在网站上看到这种情况）。
• 当您快速连续单击两个标签页时，您会看到两个标签页的内容并排显示在页面上，这很奇怪（这种情况通常发生在标签页有动画效果时）。 
• 当您想添加另一个标签页时，您必须进入脚本并链接标签页到内容。 
• 所有实现都有不同的方法（我想要一些简单且可重用的东西，而无需修改其脚本）。

我的 JQuery 标签模板解决了上述所有问题。我的开发环境是 ASP.NET C#，但在此示例中，我使用了简单的 HTML、CSS 和一个 JQuery 文件。

背景

值得查看 JQuery 官方网站上的其他模板并学习 JQuery。然而，对于本文，您只需要了解一点 HTML。如果您了解一点 CSS，那就更好了，您可以更改内容的颜色。如果您了解 JQuery，那就更棒了。就这样 :)。

Using the Code

使用代码很容易。在我提供的示例中，我已经使用了 5 个标签页。您可以根据需要进行更改。因此，您可以使用任何您喜欢的 HTML 编辑器来修改包含每个标签页和内容的 index.htm。

在 index.html 中，我链接了：

• 最新的 JQuery 文件
• tabs.js，其中包含 JQuery 脚本，该脚本根据单击的标签页显示内容 
• tabs.Css 文件，它负责主要的模板布局。

添加新标签页

所有标签页链接都以列表形式呈现，对于每个列表元素，不需要锚点或链接到任何地方。这是示例链接：您只需要 在列表中添加一个新链接，并更改步骤文本。

步骤 1

看起来是这样的

为新标签页添加内容

为了显示我们创建的链接的内容，我们需要一个标签页内容，这样我们的脚本才能在单击 step1 链接时显示它。
我们所要做的就是复制并粘贴 HTML 中的内容标签。

<div class="tabcontent"> I am going to be displayed when step 1 is clicked </div> 

注意：这里重要的是标签页内容和标签页链接的顺序。所有标签页都通过“tabcontent”的顺序映射到其内容。因此，第一个链接“Step1”映射到“'div class="tabscontent_container'”中的第一个“div class='tabcontent'”元素。添加新标签页和内容时请保持顺序。您无需添加/修改任何脚本。

关注点

• CSS 包含图像，因此所有标签页中的图像都可以更改。当前状态是红色的前进图像，其他图像是灰色条。在 CSS 中将它们更改为您喜欢的任何内容。
• 您可以将导航标签页移动到页面上的任何位置，右侧、左侧或 tabscontent 的底部。您只需要复制“div id='tabs_nav_wrapper'”周围即可。
• 如果您想更改动画移动方式，例如 fadeIn/out 或 slideDown/Up，您需要修改脚本中的一行。该行位于 DisplayTabContent() 函数中。将以“.slideDown('slow');”结尾的行更改为您想要的动画类型，例如“.slideUp();”。这是 JQuery 动画。如果您想了解更多关于动画类型的信息，请访问 JQuery 官方网站。

各位，我需要您的评论，以便我改进它。如果您觉得有用，请通过电子邮件将链接发送给您的朋友。

历史

这是简单的 JQuery 标签模板的第一个版本。