为自己的网页制做Tab Pane
在E-Spacy看到了漂亮的Tab Pane，于是也给自己的BLOG装了个。
安装方法是参照E-Spacy做的，效果见侧栏 。
到tabpane下载源代码，解压缩后，上传到自己的网页空间，推荐放到WP安装目录的wp-content\themes内。
然后把此两行代码复制到模板文件的header.php内，head之间：
- <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部分改成自己的网络链接地址，推荐使用
- <?php bloginfo('template_directory'); ?>
这样在更换空间时也不会出错。
之后便可以把自己的Sidebar的代码按照它例子的格式（此例为显示两个Tab－General，Privacy）进行改写。这里省去了原文的一 种简单的代码加载方式，虽然简单的格式完全能实现了TabPane的功能，但为了更迅速更稳定的加载各各Tab，请使用下面的代码格式。
- <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>
注释：
- <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只需依照增加代码即可，注意按次序改写。
