有朋自远方来,不亦乐乎。
纯代码实现侧边栏Tabs功能
原创 橘子书  发布于 3年前 ( 2016-08-24 ) 阅读: 975 次 抢沙发 A+

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

配图

描述

其实,网上有很多类似的插件跟教程,只不过我喜欢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>
      <li class="item item-03">
      内容3
      </li>
      <li class="item item-04">
      内容4
      </li>
 </ul>
</div>

自行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样式*/}

自行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切换。

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

Principle Team
龙砚庭官方QQ群,一个坚持强怼的7P成员群!
10人已关注

该文章还没有任何评论,你来说两句吧.

发表评论

莫慌,小狮子正在努力加载评论...