Title: Simple Tabs Shortcodes Author: Beherit Published: 2017 年 2 月 8 日 Last modified: 2020 年 4 月 8 日 --- 搜索插件 **该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起 使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。 ![](https://s.w.org/plugins/geopattern-icon/simple-tabs-shortcodes.svg) # Simple Tabs Shortcodes 作者：[Beherit](https://profiles.wordpress.org/beherit/) [下载](https://downloads.wordpress.org/plugin/simple-tabs-shortcodes.1.3.zip) * [详情](https://cn.wordpress.org/plugins/simple-tabs-shortcodes/#description) * [评价](https://cn.wordpress.org/plugins/simple-tabs-shortcodes/#reviews) * [安装](https://cn.wordpress.org/plugins/simple-tabs-shortcodes/#installation) * [开发进展](https://cn.wordpress.org/plugins/simple-tabs-shortcodes/#developers) [支持](https://wordpress.org/support/plugin/simple-tabs-shortcodes/) ## 描述 Plugin adds shortcodes to place a page content in tabs. Uses a lightweight JS script, no additional CSS files so you need to add own CSS style to your theme’s stylesheet to ensure proper display of the tabs. ## 安装 In most cases you can install automatically from plugins page in admin panel. However, if you want to install it manually, follow these steps: 1. Download the plugin and unzip the archive. 2. Upload the entire `simple-tabs-shortcodes` folder to the `/wp-content/plugins/` directory. 3. Activate the plugin through the Plugins menu in WordPress. ## 常见问题 ### Example usage There are two shortcodes available, below is a simple example of usage: ``` [tabs] [tab title="First tab"]The content of the first tab.[/tab] [tab title="Second tab"]The content of the second tab.[/tab] [tab title="Third tab"]The content of the third tab.[/tab] [/tabs] ``` This will output the following HTML: ```
The content of the first tab.
The content of the second tab.
The content of the third tab.
``` Optionally, you can set a custom ID by adding `id="my-id"` in tab shortcode. ### Example CSS Here is an example CSS, make the necessary changes if you want to customize the look and feel of tabs. ``` .tabs-nav { margin: 0; border-bottom: 1px solid #ccc; } .tabs-nav ul { list-style: none; } .tabs-nav li {display: inline-block;} .tabs-nav a { display: block; padding: 5px 10px; border: 1px solid transparent; text-decoration: none; } .tabs-nav a.active { border-color: #ccc; border-bottom-color: #fff; } section.tab { display: none; margin-bottom: 15px; padding: 15px 0; } section.tab.active {display: block;} ``` ### Selecting a tab by the URL You can select default tab by using a hash in the URL – simply add `#tab-name` at the end of the page URL to select the specific tab. This example URL will select tab with the title / id “something”: `http://domain.tld/your-page/#something` ### Switching to the tab by the link Tabs can be switched by a normal link, just add a class tab-url to the link. Example: ``` Something ``` ## 评价 ![](https://secure.gravatar.com/avatar/b382bcf0dcb8789f25830744642416830ada9527ee26aaee04a00333703250e1? s=60&d=retro&r=g) ### 󠀁[Super](https://wordpress.org/support/topic/super-1996/)󠁿 [Mladen Gradev](https://profiles.wordpress.org/joe8104/) 2020 年 10 月 31 日 Simle & useful & works great. Thank you! ![](https://secure.gravatar.com/avatar/b6a7270ed42cdc851b822bbe70c4a4e30abdcf25a949826e774dd195e9223857? s=60&d=retro&r=g) ### 󠀁[Thanks for the good work!](https://wordpress.org/support/topic/thanks-for-the-good-work-2/)󠁿 [stephanebeck](https://profiles.wordpress.org/stephanebeck/) 2019 年 5 月 22 日 Beautifully minimalistic. Allows several independent tab groups on the same page. Exactly what I was after! ![](https://secure.gravatar.com/avatar/163f63d478d33a4b609dc42b24ab5874bbbc28c86f8c28e5b15ee328140eeb03? s=60&d=retro&r=g) ### 󠀁[Simple and lightweight! Thanks!](https://wordpress.org/support/topic/simple-and-lightweight-thanks/)󠁿 [laurenfs](https://profiles.wordpress.org/laurenfs/) 2017 年 3 月 30 日 1 回复 ![](https://secure.gravatar.com/avatar/cc16ffb593690511d3559842f2a3ba9b0d430aca75e6d494aa56ff391b017141? s=60&d=retro&r=g) ### 󠀁[Super!](https://wordpress.org/support/topic/super-715/)󠁿 [Gronix](https://profiles.wordpress.org/gronix/) 2017 年 2 月 16 日 Thanks 🙂 [ 阅读所有4条评价 ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/) ## 贡献者及开发者 「Simple Tabs Shortcodes」是开源软件。 以下人员对此插件做出了贡献。 贡献者 * [ Beherit ](https://profiles.wordpress.org/beherit/) 「Simple Tabs Shortcodes」插件已被翻译至 2 种本地化语言。 感谢[所有译者](https://translate.wordpress.org/projects/wp-plugins/simple-tabs-shortcodes/contributors) 为本插件所做的贡献。 [帮助将「Simple Tabs Shortcodes」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/simple-tabs-shortcodes) ### 对开发感兴趣吗? 您可以[浏览代码](https://plugins.trac.wordpress.org/browser/simple-tabs-shortcodes/)， 查看[SVN仓库](https://plugins.svn.wordpress.org/simple-tabs-shortcodes/)，或通过 [RSS](https://plugins.trac.wordpress.org/log/simple-tabs-shortcodes/?limit=100&mode=stop_on_copy&format=rss) 订阅[开发日志](https://plugins.trac.wordpress.org/log/simple-tabs-shortcodes/)。 ## 更新日志 #### 1.3 (2020-04-08) * Pure JavaScript instead of jQuery. #### 1.2. (2018-08-12) * Support non-Latin URLs. #### 1.1.2 (2018-12-13) * Minor fixes. #### 1.1 (2017-12-07) * Changed class name `tab-content` to `tabs-content`. #### 1.0.2 (2017-02-10) * Changes in tabs navigation structure. #### 1.0 (2017-02-09) * First public version. ## 额外信息 * 版本 **1.3** * 最后更新：**6 年前** * 活跃安装数量 **100+** * WordPress 版本 ** 4.6 或更高版本 ** * 已测试的最高版本为 **5.4.19** * PHP 版本 ** 7.0 或更高版本 ** * 语言 * [English (US)](https://wordpress.org/plugins/simple-tabs-shortcodes/) 、 [Polish](https://pl.wordpress.org/plugins/simple-tabs-shortcodes/) 和 [Russian](https://ru.wordpress.org/plugins/simple-tabs-shortcodes/). * [翻译成简体中文](https://translate.wordpress.org/projects/wp-plugins/simple-tabs-shortcodes) * 标签 * [shortcodes](https://cn.wordpress.org/plugins/tags/shortcodes/)[tab](https://cn.wordpress.org/plugins/tags/tab/) [tabs](https://cn.wordpress.org/plugins/tags/tabs/) * [高级视图](https://cn.wordpress.org/plugins/simple-tabs-shortcodes/advanced/) ## 评级 5 星（最高 5 星）。 * [ 4 条 5 星评价 ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=5) * [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=4) * [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=3) * [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=2) * [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/#new-post) [查看全部评论](https://wordpress.org/support/plugin/simple-tabs-shortcodes/reviews/) ## 贡献者 * [ Beherit ](https://profiles.wordpress.org/beherit/) ## 支持 有话要说吗？是否需要帮助？ [查看支持论坛](https://wordpress.org/support/plugin/simple-tabs-shortcodes/)