外贸易 产品一二级，只做二级切换右侧，右侧默认推荐几个产品

<div class="home-product">
   
    <div class="sort">
        @foreach (inject('category')->cate() as $value)
        <div class="category-block">
            <a href="javascript:;" class="cat-title" data-cid="{{ $value->id }}">
                {{ $value->description->cname }}
            </a>

            @if(!$value->children->isEmpty())
            <ul class="deep2 tab-li">
                @foreach ($value->children as $val)
                <li data-subid="{{ $val->id }}">
                    <a href="javascript:;">{{ $val->cname }}</a>
                </li>
                @endforeach
            </ul>
            @endif
        </div>
        @endforeach
    </div>

    <div class="tab-con">

        <!-- ⭐ 默认推荐内容，不参与切换 -->
        <div class="deep2 tab-main active" data-cid="0">
            <ul class="listx">
                @foreach (inject('list')->lists('product', 0, 2, 0) as $val2)
                <li>
                    <a href="{{ $val2->present()->url }}" title="{{ $val2->description->title }}" class="img">
                        <div class="img com-img">
                            <img src="{{ $val2->description->present()->image('294*220') }}" alt="{{ $val2->description->title }}">
                        </div>
                        <h3>{{ $val2->description->title }}</h3>
                    </a>
                </li>
                @endforeach
            </ul>
        </div>

        <!-- ⭐ 所有子分类对应内容 -->
        @foreach (inject('category')->cate() as $value)
            @if(!$value->children->isEmpty())
                @foreach ($value->children as $val)
                <div class="deep2 tab-main" data-cid="{{ $value->id }}" data-subid="{{ $val->id }}">
                    <ul class="listx flex">
                        @foreach (inject('list')->lists('product', $val->id, 2, 0) as $val2)
                        <li>
                            <a href="{{ $val2->present()->url }}" title="{{ $val2->description->title }}" class="img">
                                <div class="img com-img">
                                    <img src="{{ $val2->description->present()->image('294*220') }}" alt="{{ $val2->description->title }}">
                                </div>
                                <p>{{ $val2->description->title }}</p>
                            </a>
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endforeach
            @endif
        @endforeach

    </div>

</div>




<style type="text/css">
    .tab-con { position: relative; }
    .tab-con .tab-main { 
        position: absolute; 
        left: 0; 
        top: 0; 
        right: 0;
        opacity: 0; 
        visibility: hidden; 
        transition: all .5s ease; 
        z-index: 9;
    }
    .tab-con .tab-main.active { 
        position: static; 
        opacity: 1; 
        visibility: visible; 
    }
</style>

<script>
    $(function () {

        var $defaultTab = $('.tab-main[data-cid="0"]'); // 默认推荐内容
        var $allTabs = $('.tab-main');                 // 所有内容块

        // ---------- 默认只显示推荐 ----------
        $allTabs.removeClass("active");
        $defaultTab.addClass("active");

        // ---------- 遍历所有一级分类 ----------
        $(".category-block").each(function () {

            var $group = $(this);
            var cid = $group.find(".cat-title").data("cid");  // 一级分类 ID
            var $lis = $group.find(".tab-li li");

            // ⭐ 如果一级分类没有二级 → 跳过
            if ($lis.length === 0) return true;

            // ---------- 二级 hover 切换 ----------
            $lis.hover(function () {

                var subid = $(this).data("subid"); // 当前二级ID

                // 左侧样式
                $(this).addClass("active").siblings().removeClass("active");

                // 右侧：隐藏所有，显示匹配的
                $allTabs.removeClass("active");

                // 显示当前二级对应的内容块
                $('.tab-main[data-cid="' + cid + '"][data-subid="' + subid + '"]').addClass("active");
            });

            // ---------- 鼠标离开一级 → 恢复默认推荐 ----------
            $group.mouseleave(function () {
                $lis.removeClass("active");
                $allTabs.removeClass("active");
                $defaultTab.addClass("active");
            });

        });

    });

</script>