pgfqe6ch8/app/views/libraries/index.html.erb

<div class="educontent">
  <div class="edu-back-white mb30 mt30">
    <p class="padding20-30 clearfix bor-bottom-greyE">
      <span class="font-18 fl color-grey-3">文库</span>
      <a href="javascript:void(0)" class="fr color-blue font-16 mt3">新建</a>
    </p>
    <div class="clearfix pt20 pl30 pr30">
      <ul class="fl library_nav">
        <li class="active">全部</li>
        <li>我的</li>
      </ul>
      <div class="pr fr"></div>
    </div>
  </div>
  <div class="library_list">
    <li class="library_list_item">
      <img src="http://img4.duitang.com/uploads/item/201412/01/20141201183854_TRArc.thumb.700_0.png" width="50" height="50" class="radius mr15 mt3">
      <div class="flex1">
        <p class="task-hide font-16 mb15 lineh-20">软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格</p>
        <p class="clearfix lineh-20">
          <span class="color-grey-3 mr20">张莉</span>
          <span class="color-grey-c mr20">188 浏览</span>
          <span class="color-grey-c mr20">发布时间：2018-05-15 15:45</span>
        </p>
      </div>
    </li>
    <li class="library_list_item">
      <img src="http://img4.duitang.com/uploads/item/201412/01/20141201183854_TRArc.thumb.700_0.png" width="50" height="50" class="radius mr15 mt3">
      <div class="flex1">
        <p class="task-hide font-16 mb15 lineh-20">软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格</p>
        <p class="clearfix lineh-20">
          <span class="color-grey-3 mr20">张莉</span>
          <span class="color-grey-c mr20">188 浏览</span>
          <span class="color-grey-c mr20">发布时间：2018-05-15 15:45</span>
        </p>
      </div>
    </li>
    <li class="library_list_item">
      <img src="http://img4.duitang.com/uploads/item/201412/01/20141201183854_TRArc.thumb.700_0.png" width="50" height="50" class="radius mr15 mt3">
      <div class="flex1">
        <p class="task-hide font-16 mb15 lineh-20">软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格软件项目的开发流程视频及其需求规格</p>
        <p class="clearfix lineh-20">
          <span class="color-grey-3 mr20">张莉</span>
          <span class="color-grey-c mr20">188 浏览</span>
          <span class="color-grey-c mr20">发布时间：2018-05-15 15:45</span>
        </p>
      </div>
    </li>
  </div>
  <div class="mt30 mb50 edu-txt-center clearfix">
    <!--这里放分页-->
  </div>
</div>
<script>
    $(function(){
        $(".library_nav").on("click","li",function(){
            $(".library_nav li").removeClass("active");
            $(this).addClass("active");
        })
    })
</script>