富文本编辑文档内容配合js实现tab选项卡效果


前几天朋友有个需求,他使用的是dedecms,要在文章详情中实现一个tab选项卡的切换效果,然后这个文章详情的内容又是通过后台富文本编辑得来的。

TIM图片20180226162835


分析问题

我真的觉得这个需求很奇葩,不过不成熟的公司和产品“需求”就是如此。

要实现这个需求的话,首先得开富文本编辑文档的时候做处理,得加标识区分下每个tab+tab对应的内容

我选择使用了h1,像使用hr说明标签显然麻烦多了,不过 h1 的话一篇文章太多也不好,用h6可能更恰当,前提是tab对应的内容div中不应该存在这个标识标签了。

也因为用h1标签中,里面可以放tab的标题,再合适不过了。

接下来就是写css样式 和 使用js处理dom和tab切换事件了。


解决问题

演示的dom如下,凑合测试了。

TIM图片20180226163704

我们发现每个h1(tab)下都有个div(tab切换对应的内容)

直接上源码,代码写的很随意,勿怪。

css部分

#my-tab {
    padding: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    border-bottom: 2px solid #ccc;
  }
  #my-tab span {
    margin-left: 15px;
    margin-bottom: 0;
    padding: 10px;
    padding-bottom: 15px;
    color: #000;
    font-size: 18px;
    /*font-weight: bold;*/
    cursor: pointer;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
  }
  #my-tab span.active {
    color: #008de8;
    border-bottom: 3px solid #008de8;
  }
  .my-tab-content {
    display: none;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
  }
  .my-tab-content.active {
    display: block;
  }


js部分

var h1 = $("#sitecontent h1")
  var tab_count = h1.length

  var tab_html = '<div id="my-tab">'
  for (var i = 0; i < tab_count; i++) {
    $(h1[i]).hide()
    if(i == 0){
      tab_html += '<span class="active">'+$(h1[i]).text()+'</span>'
    }else{
      tab_html += '<span>'+$(h1[i]).text()+'</span>'
    }

    var div = $(h1[i]).next()
    $(div).addClass('my-tab-content')
    if(i == 0){
      $(div).addClass('active')
    }
  }
  tab_html += '</div>'
  $(".postbp").prepend(tab_html)
  
  $(document).on('click', '#my-tab span', function(event) {
    if(!$(this).hasClass('active')){
      var index = $("#my-tab span").index(this)
      $("#my-tab span").removeClass('active')
      $(this).addClass('active')

      $('.my-tab-content').removeClass('active')
      $('.my-tab-content').eq(index).addClass('active')
    }
  });


最后

上个效果图

TIM图片20180226164413

有疑问和思路可以留言,我就做个笔记,思路看js代码。

自己原创的解决方法哈,这种奇葩的需求,网上搜都不懂怎么搜。

end


html css javascript


上一篇:YPHP博客首页图片延迟加载

论坛回帖楼层的实现:下一篇