在E-Spacy看到了漂亮的Tab Pane，于是也给自己的BLOG装了个。
安装方法是参照E-Spacy做的，效果见侧栏 。
到tabpane下载源代码，解压缩后，上传到自己的网页空间，推荐放到WP安装目录的wp-content\themes内。
然后把此两行代码复制到模板文件的header.php内，head之间：
1 2 | <script type="text/javascript" src="js/tabpane.js"></script> <link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" /> |
其中js/tabpane.js和css/tab.webfx.css部分改成自己的网络链接地址，推荐使用
1 | <?php bloginfo('template_directory'); ?> |
这样在更换空间时也不会出错。
之后便可以把自己的Sidebar的代码按照它例子的格式（此例为显示两个Tab－General，Privacy）进行改写。这里省去了原文的一 种简单的代码加载方式，虽然简单的格式完全能实现了TabPane的功能，但为了更迅速更稳定的加载各各Tab，请使用下面的代码格式。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="tab-pane" id="tab-pane-1"> <script type="text/javascript">var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );</script> <div class="tab-page" id="tab-page-1"> <h2 class="tab">General</h2> <script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );</script> This is text of tab 1. This is text of tab 1. </div> <div class="tab-page" id="tab-page-2"> <h2 class="tab">Privacy</h2> <script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-2" ) ); </script> This is text of tab 2. This is text of tab 2. </div> </div> |
注释：
1 | <h2 class="tab"></h2> |
之间的部分即为Tab的标题
This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1.
此部分为Tab的内容。
在实现自己侧边栏的TabPane效果时只需要把这些代码替换成sidebar.php里的各各内容即可，添加更多Tab只需依照增加代码即可，注意按次序改写。