{"published":true,"visible":true,"routable":true,"comment":{"enable":true,"reply":true},"discuss":{"enable":true},"title":"JavaScript 选项卡切换","date":"2012-04-05 20:08","author":"dallaslu","taxonomy":{"category":["Internet"],"tag":["Javascript"]},"summary_html":"

以一定结构组织 HTML，引入所需 JavaScript 脚本和 CSS样式文件，即可创建可切换的 Tab Show。

","summary":"以一定结构组织 HTML，引入所需 JavaScript 脚本和 CSS样式文件，即可创建可切换的 Tab Show。","template":"item","lang":"zh-CN","url":"/the-javascript-tab-switching/","slug":"the-javascript-tab-switching","content":"

以一定结构组织 HTML，引入所需 JavaScript 脚本和 CSS样式文件，即可创建可切换的 Tab Show。

\n\n

$\"\"$

基础 HTML 结构

引入所需 jstab.css，jstab.js，mini.min.js，为外部 DIV 设定基本样式：

<script src=\"mini.min.js\" type=\"text/javascript\"></script>\n<script src=\"jstab.js\" type=\"text/javascript\"></script>\n<script type=\"text/javascript\">\n\t// ...\n\tjstab({\n\t\t\"nav\" : \"#banner-tab-nav\",\n\t\t\"content\" : \"#banner-tab-content\"\n\t});\n\t// ...\n</script>\n

内容 HTML 结构

需要为导航和内容创建两个列表元素，并按如下结构组织内容：

<ul class=\"jstab-nav-list\" id=\"banner-tab-nav\">\n\t<li class=\"jstab-nav-item jstab-nav-item-first jstab-nav-current-item\">\n\t\t<div class=\"jstab-nav-label\">\n\t\t\t\t<span class=\"jstab-nav-title\">Title #1</span> <span class=\"jstab-nav-desc\">Description for Title #1</span>\n\t\t</div>\n\t</li>\n\t<li class=\"jstab-nav-item\">\n\t\t<div class=\"jstab-nav-label\">\n\t\t\t\t<span class=\"jstab-nav-title\">Title #2</span> <span class=\"jstab-nav-desc\">Description for Title #2</span>\n\t\t</div>\n\t</li>\n\t<li class=\"jstab-nav-item jstab-nav-item-last\">\n\t\t<div class=\"jstab-nav-label\">\n\t\t\t<span class=\"jstab-nav-title\">Title #3</span> <span class=\"jstab-nav-desc\">Description for Title #3</span>\n\t\t</div>\n\t</li>\n</ul>\n<ul class=\"jstab-content-list\" id=\"banner-tab-content\">\n\t<li class=\"jstab-content-item jstab-content-current-item\" id=\"banner-tab-content-1\">\n\t\t\t<div class=\"jstab-content\">\n\t\t\t\n\t\t\tcontent #1\n\t\t\t\n\t\t\tcontent #1\n\t\t\t\n\t\t\t</div>\n\t</li>\n\t<li class=\"jstab-content-item\" id=\"banner-tab-content-2\">\n\t\t<div class=\"jstab-content\">\n\t\t\n\t\tcontent #2\n\t\t<ol>\n\t\t\t<li>item 1</li>\n\t\t\t<li>item 2</li>\n\t\t</ol>\n\t\t</div>\n\t</li>\n\t<li class=\"jstab-content-item\" id=\"banner-tab-content-3\">\n\t\t<div class=\"jstab-content\">\n\t\t\n\t\tcontent #3\n\t\t\n\t\t</div>\n\t</li>\n</ul>\n

其中，#banner-tab-nav 中的每一个 a 元素都指向其对应的 .jstab-content-item 元素。注意这两个列表的 ID 与下方 JavaScript 中对应。

样式调整

提供的 CSS 样式表中，有多处以 px 单位指定了绝对大小，请依实际情况逐个调整。

下载

包括代码和演示：jstab

","earlier":"wordpress-themes-functions-php-commonly-used-code","newer":"blackberry-broken-network-repair-mds-server","related":[{"page":{"visible":true,"comment":{"enable":true,"reply":true},"discuss":{"enable":true},"title":"多选下拉列表","date":"2010-12-28 21:38","author":"dallaslu","taxonomy":{"category":["Internet"],"tag":["Javascript"]},"summary_html":"

在网上找了几个多选下拉列表的例子，还真是没有太合适的。特殊情况又不许用jQuery，所以自己写了一个玩玩儿。还没有在正式场合中使用。看截图。

","summary":"在网上找了几个多选下拉列表的例子，还真是没有太合适的。特殊情况又不许用jQuery，所以自己写了一个玩玩儿。还没有在正式场合中使用。看截图。","template":"item","lang":"zh-CN","url":"/multiple-drop-down-list/","slug":"multiple-drop-down-list","newer":"word-safe-mode","earlier":"delicious-to-google"},"score":2},{"page":{"visible":true,"comment":{"enable":true,"reply":true},"discuss":{"enable":true},"title":"使用 Webhook 来自动拉取代码","date":"2023-05-31 05:31","taxonomy":{"category":["Internet"],"tag":["Webhook","Git","Forgejo"]},"summary_html":"

很多应用以文本来存储数据，比如 Beancount 账本、一些静态博客。这些数据非常适合用 git 来做版本管理。但本地修改并 push 之后，还需要在其他地方 pull 才行。本文使用 Webhook 来自动完成这一操作过程。

","summary":"很多应用以文本来存储数据，比如 Beancount 账本、一些静态博客。这些数据非常适合用 git 来做版本管理。但本地修改并 push 之后，还需要在其他地方 pull 才行。本文使用 Webhook 来自动完成这一操作过程。","template":"item","lang":"zh-CN","url":"/webhook-to-git-pull-from-forgejo/","slug":"webhook-to-git-pull-from-forgejo","earlier":"ufw-route-as-a-wonderful-usage-of-gfw-blocked-ip"},"score":1},{"page":{"visible":true,"comment":{"enable":true,"reply":true},"discuss":{"enable":true},"title":"被墙IP的妙用：UFW 转发","date":"2023-05-28 05:28","taxonomy":{"category":["Internet"],"tag":["GFW","UFW","Ubuntu"]},"summary_html":"

很多人为自己的 Web 服务开启了 Cloudflare 的 CDN，既能加速（也可能减速），又能隐藏真实的服务器 IP，避免被攻击。不过，当你拥有了一个被墙的 IP，那么你就可以肆无忌惮地考虑搭建一些非 Web 服务了。一个死去的人不会再次死亡，一个已经被墙的 IP 也不再担心被墙。而且它还天然免疫来自中国大陆的攻击。

","summary":"很多人为自己的 Web 服务开启了 Cloudflare 的 CDN，既能加速（也可能减速），又能隐藏真实的服务器 IP，避免被攻击。不过，当你拥有了一个被墙的 IP，那么你就可以肆无忌惮地考虑搭建一些非 Web 服务了。一个死去的人不会再次死亡，一个已经被墙的 IP 也不再担心被墙。而且它还天然免疫来自中国大陆的攻击。","template":"item","lang":"zh-CN","url":"/ufw-route-as-a-wonderful-usage-of-gfw-blocked-ip/","slug":"ufw-route-as-a-wonderful-usage-of-gfw-blocked-ip","newer":"webhook-to-git-pull-from-forgejo","earlier":"using-wubi-pinyin-in-hamster"},"score":1},{"page":{"visible":true,"comment":{"enable":true,"reply":true},"discuss":{"enable":true},"title":"在仓输入法中使用五笔拼音","date":"2023-05-23 05:23","taxonomy":{"category":["Internet"],"tag":["Rime","Hamster","iOS"]},"summary_html":"

五笔拼音混合输入真的很快乐。此前我一直在 iOS 上使用 iRime 输入法，现在有了新选择：Hamster，也叫仓（鼠）输入法。相比较起来，Hamster 更加简洁，和其他平台上的 Rime 实现更相像。安装完 Hamster 后，默认是没有五笔拼音方案的。下面介绍一下在 Hamster 导入五笔拼音的办法。

","summary":"五笔拼音混合输入真的很快乐。此前我一直在 iOS 上使用 iRime 输入法，现在有了新选择：Hamster，也叫仓（鼠）输入法。相比较起来，Hamster 更加简洁，和其他平台上的 Rime 实现更相像。安装完 Hamster 后，默认是没有五笔拼音方案的。下面介绍一下在 Hamster 导入五笔拼音的办法。","template":"item","lang":"zh-CN","url":"/using-wubi-pinyin-in-hamster/","slug":"using-wubi-pinyin-in-hamster","newer":"ufw-route-as-a-wonderful-usage-of-gfw-blocked-ip","earlier":"why-is-it-necessary-to-develop-a-new-blog-program-in-2023"},"score":1},{"page":{"visible":true,"comment":{"enable":true,"reply":true},"discuss":{"enable":true},"title":"2023年了为什么还要重新开发一个博客程序","date":"2023-05-19 05:19","taxonomy":{"category":["Internet"],"tag":["Blog","Svelte","WordPress","Grav"]},"summary_html":"

早年间博客火热的时候，大家纷纷开通了博客。不用担心没有话题可写，可以先写如何选择博客托管平台；再折腾自建博客，话题变成如何搭建和使用博客程序。2021年，我从 WordPress 切换到 Grav 之后，竟然还没有写过关于 Grav 的内容，这个话题还没有充分探讨。鉴于我的输出频率实在太低，还没到不开发个博客就没话题的程度，那么为什么还要重新写博客程序呢？

","summary":"早年间博客火热的时候，大家纷纷开通了博客。不用担心没有话题可写，可以先写如何选择博客托管平台；再折腾自建博客，话题变成如何搭建和使用博客程序。2021年，我从 WordPress 切换到 Grav 之后，竟然还没有写过关于 Grav 的内容，这个话题还没有充分探讨。鉴于我的输出频率实在太低，还没到不开发个博客就没话题的程度，那么为什么还要重新写博客程序呢？","template":"item","lang":"zh-CN","url":"/why-is-it-necessary-to-develop-a-new-blog-program-in-2023/","slug":"why-is-it-necessary-to-develop-a-new-blog-program-in-2023","newer":"using-wubi-pinyin-in-hamster","earlier":"iproyal-usa-static-residential-proxies"},"score":1}]}

黑莓断网修复 MDS 服务器

较新 CentOS6 yum 安装 pptp

较早 JavaScript 选项卡切换

相关

UberTwitter 0.97 可用API

SocialScope 体验报告

黑莓新手牢骚多

使用 Webhook 来自动拉取代码

被墙IP的妙用：UFW 转发

讨论

较新
CentOS6 yum 安装 pptp

较早
JavaScript 选项卡切换