简单的JQuery选项卡模板

分享于 

4分钟阅读

Web开发

  繁體
muhsin_meydan_tabs_template.gif

介绍

我在想如何使一个简单的标签,我发现很多不同的解决方案。 我尝试了几个,但我注意到了一些我尝试过的问题,比如:

  • 当页面加载时,有时你会看到 blink 中的所有选项卡,然后他们会获得隐藏的( 我不想在网站上看到)。
  • 当你单击两个选项卡之一时,你会看到页面旁边的选项卡内容,这是奇怪的( 这通常发生在标签动画时)。
  • 当你想添加另一个选项卡时,你必须进入脚本并将该选项卡链接到内容。
  • 所有的实现都有不同的方法( 我希望在不修改它的脚本的情况下简单且可以重用)。

我的JQuery标签模板解决了 上面 中列出的所有问题。 我的开发是 ASP.NET C#,但是我使用了简单的HTML。CSS和一个JQuery文件,。

背景

在JQuery官方网站上寻找其他模板和学习JQuery是值得的。 但是对于本文,你所要了解的就是理解一些 HTML。 如果你知道一个CSS的一点,就是好的,你可以改变内容的色彩。 如果你知道 JQuery,那就更好了。 就是这样:。

使用代码

使用代码很简单。 在我给你的示例中,我已经使用 5个标签。 你可以随意改变它。 因此,你可以使用你选择的任何HTML编辑器修改 index.htm,它包含每个标签的标签和内容。

在 index.html 中,我有以下链接:

  • 最新的jquery文件
  • 包含显示基于哪个选项卡的内容的JQuery脚本的 tabs.js
  • tabs.Css 文件,它完成主模板布局。
添加新标签

所有选项卡链接都采用 List 格式,对于每个 List 元素,不需要任何锚点或者链接。 这是示例链接: 你需要做的就是在清单中添加一个新链接,并更改步骤文本。

步骤 1

以下是它的外观:

为新标签添加内容

为了显示我们创建的链接的内容,我们需要有一个选项卡内容,以便在单击 step1 链接时显示它。
我们只需要在HTML中复制并粘贴内容标签:

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

注意 : 这里的重要内容是标签内容和标签链接的顺序。 所有选项卡都按照" tabcontent"的顺序映射到它的内容。 所以第一个链接" step1"被映射到第一个"元素中的div class='tabcontent' 元素" 'div class="tabscontent_container'"。 添加新标签和内容时保持顺序。 你无需添加/修改任何脚本。

Points of Interest

  • CSS包含图像,因此标签中的所有图像都可以更改。 当前staus是红色前向图像,其他图像为灰色条。 用CSS把它们变成你喜欢的。
  • 可以将导航选项卡移动到页面右上方,左边或者在 tabscontent 底部的位置。 你所要做的就是复制" div id='tabs_nav_wrapper'"。
  • 如果要改变动画移动的方式如 fadein/出或者 slidedown/向上,则需要修改脚本的一行。 行位于 DisplayTabContent() 函数中。 将结束" .slideDown('slow');"的行更改为所需的动画类型 比如," .slideUp();"。 这是JQuery动画如果你想了解更多关于类型的信息,请访问JQuery官方站点。

各位,我需要你们的意见,这样我才能改进。 如果你发现这个有用,请发电子邮件给你的朋友。

历史记录

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


相关文章