tp5中的选项卡问题

Question

tp5中的选项卡问题

Jouzeyu

12

发布于
2019-03-09

新手上路，请多包涵

问题描述

图片描述
怎么实现点击未结展示未结的数据，点击已结展示已结的数据
数据已经获取到，展示在html中使用的是thinkphp中的volist

问题出现的环境背景及自己尝试过哪些方法

wamp环境，thinkPHP5框架
尝试的方法有一共创建4个div，每次显示一个，通过js实现点击进行选项卡的切换，但是这样的话，html中的内容是不是有点多，所以求助下有没有更简单的办法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
html的代码
<div class="fly-panel-title fly-filter active">

      <a href="" class="layui-this">综合</a>
      <span class="fly-mid"></span>
      <a href="" class="">未结</a>
      <span class="fly-mid"></span>
      <a href="" class="">已结</a>
      <span class="fly-mid"></span>
      <a href=""class="">精华</a>
      <span class="fly-filter-right layui-hide-xs">
        <a href="" class="layui-this">按最新</a>
        <span class="fly-mid"></span>
        <a href="" class="">按热议</a>
      </span>
    </div>

    <ul class="fly-list">
      {volist name="allData" id="vo"}
      <li>
        <a href="user/home.html" class="fly-avatar">
          <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" alt="贤心">
        </a>
        <h2>
          <a class="layui-badge">{$vo.type}</a>
          <a href="detail.html">{$vo.title}</a>
        </h2>
        <div class="fly-list-info">
          <a href="user/home.html" link>
            <cite>贤心</cite>
            <i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
            <i class="layui-badge fly-badge-vip">VIP3</i>
          </a>
          <span>{$vo.add_time|date="Y-m-d H:i",###}</span>

          <span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> {$vo.reward}</span>
          {if condition="$vo.adopt eq 1"}
          <span class="layui-badge fly-badge-accept layui-hide-xs">已结</span>
          {else/}
          {/if}
          <span class="fly-list-nums">
            <i class="iconfont icon-pinglun1" title="回答"></i> 66
          </span>
        </div>
        <div class="fly-list-badge">
          {if condition="$vo.fine eq 1 && $vo.top eq 1"}
          <span class="layui-badge layui-bg-black">置顶</span>
          <span class="layui-badge layui-bg-red">精帖</span>
          {elseif condition="$vo.fine eq 1"}
          <span class="layui-badge layui-bg-red">精帖</span>
          {elseif condition="$vo.top eq 1"}
          <span class="layui-badge layui-bg-black">置顶</span>
          {else/}
          {/if}
        </div>
      </li>
      {/volist}
    </ul>

控制器代码
public function __construct()

{
    parent::__construct();
    $this -> table = 'post';
}
//查询置顶数据
public function showTopData(){
    return Db::name($this -> table)->where('top',1) -> order('id desc') -> select();
}
//获取所有数据，按最新排列
public function allData(){
    return Db::name($this -> table)->order('id desc') -> select();
}
//未结数据
public function offData(){
    return Db::name($this -> table)->where('adopt',0) -> order('id desc') -> select();
}
//已结数据
public function onData(){
    return Db::name($this -> table)->where('adopt',1) -> order('id desc') -> select();
}
//已结数据
public function fineData(){
    return Db::name($this -> table)->where('fine',1) -> order('id desc') -> select();
}