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

boke1122017-01-03浏览 443 评论 1

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

纯代码实现为WordPress站点侧边栏添加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切换。

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

文章来源:boke112
XM AD

如风,发表在折腾捣鼓打印此文

本站为姜哥创建的一介小民,内容大多为原创。创作不易,转载请注明来源,谢谢!

发表评论


49 + 9 = ?

  1. 纯洁博客
    纯洁博客 @回复

    弄上这个是挺好看的