利用Tabs功能让wordpress侧边栏选项卡切换显示

经常看到有一些网站的侧边栏内容可以水平切换，在有限的空间内尽可能的展示更多内容，堪称螺狮壳里做道场，非常精妙。这种展示方式有一款wordpress插件可以实现——WP Tab Widget。但是据说插件装多了不好，所以我们可以用纯代码为wordpress实现侧边栏选项卡切换显示！

一、添加Tab切换的JS代码：

其实选项卡切换的主要功能就是通过JS代码来实现的，所以我们首先搞定这段内容，将下面的JS代码添加的主题的header文件中。

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

二、添加选项卡切换的CSS样式：

.widgettab {
clear: both;position: relative;margin-bottom: 10px;background-color:#fff;border-radius:4px;border:1px solid #eaeaea;overflow:hidden;}
.widget-Tabs{height:200px;}
.widget-tab{background-color: #fbfbfb;line-height: 36px;height: 36px;border-bottom: 1px solid #eaeaea;}
.widget-tab li{float: left;width: 25%;text-align: center;color: #999;border-right: 1px solid #eaeaea;cursor: pointer;list-style:none;}
.widget-tab 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样式*/}

三、在主题的小工具里填写DIV代码：

js和css代码设置好之后，我们就可以添加DIV代码让选项卡切换功能显示在网站前端，这个可以添加到wordpress侧边栏文件sidebar.php，也可以使用wordpress主题自带的小工具功能添加。div代码：

<div class="widgettab widget-Tabs"> 
<ul class="widget-tab"> 
<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>
<li class="item item-03"> 内容3 </li> 
<li class="item item-04"> 内容4 </li> 
</ul> 
</div>