纯代码实现为WordPress站点侧边栏添加Tabs功能

一直都觉得博客的侧边栏有个Tabs挺方便的，既不会占用多大的空间，又美观有特色。所以前两天借鉴dux主题的Tabs风格，马马虎虎捣鼓出来了，效果如下：

其实，网上有很多类似的插件（如WordPress侧边栏TAB选项卡插件WP Tab Widget）跟教程，只不过我比较喜欢DIY化的折腾。所以，下面分享一下我捣鼓的过程，以下教程算是“Tabs切换通用版”的教程，共三步骤。至于具体内容跟样式，则需要自己去DIY：

一、php部分

打开主题目录下的侧边栏文件，一般是sidebar.php，然后在合适的地方（想要显示的位置）插入以下代码：

<div class="widgettab widget-Tabs">
<ul class="widget-nav">
<li class="active" >标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<ul class="widget-navcontent">
<li class="item item-01 active">
内容1
</li>
<li class="item item-02">
内容2
<li class="item item-03">
内容3
</li>
<li class="item item-04">
内容4
</li>
</ul>
</div>

PS：请自行DIY代码里面的：标题与内容。

二、CSS部分

打开主题目录下的样式文件，一般是style.css，然后在最后面添加以下代码：

.widgettab {clear: both;position: relative;margin-bottom: 15px;background-color:#fff;border-radius:4px;border:1px solid #eaeaea;overflow:hidden;}
.widget-Tabs{height:200px;}
.widget-nav{background-color: #fbfbfb;line-height: 36px;height: 36px;border-bottom: 1px solid #eaeaea;}
.widget-nav li{float: left;width: 25%;text-align: center;color: #999;border-right: 1px solid #eaeaea;cursor: pointer;list-style:none;}
.widget-nav li.active{background-color: #fff;color: #666;font-weight: bold;cursor: default;}
.widget-navcontent{clear: both;position: relative;}
.widget-navcontent .item{padding: 15px;width: 100%;position: absolute;left: 100%;opacity: 0}
.widget-navcontent .item.active{left: 0;opacity: 1}
.widget-navcontent .item-01 li{/*用户自定义css样式*/}
.widget-navcontent .item-02 li{/*用户自定义css样式*/}
.widget-navcontent .item-03 li{/*用户自定义css样式*/}
.widget-navcontent .item-04 li{/*用户自定义css样式*/}

PS：请自行DIY内容展示的样式。

三、JS部分

在主题目录下的JS文件夹，打开最常用的js文件（或者直接在footer.php文件引入js代码），js代码：

if( $('.widget-nav').length ){
$('.widget-nav li').each(function(e){
$(this).hover(function(){
$(this).addClass('active').siblings().removeClass('active')
$('.widget-navcontent .item:eq('+e+')').addClass('active').siblings().removeClass('active')
})
})
}

四、总结

这个教程最大的作用就是将整个Tabs框架都弄出来了，然后里面的内容跟样式可供使用者自由折腾。借助上面的Tabs框架，完全可以折腾出本文开头所展示图片的效果。也可以借助它弄出一个“分类目录+最新文章+最热文章+评论+标签云……”等个性组合（4栏显示最优）的Tabs切换。

当然，它并不仅限适用于侧边栏，喜欢折腾的话，完全可以将它放到首页、文章内页、页面等。