任务46:当前栏目高亮

1, App\Http\Controllers\Index\CateController.php 栏目控制器index()方法 改成 分配当前栏目ID到模板

<?php
namespace App\Http\Controllers\Index;
class CateController extends BaseController
{
    public function index(int $id){
        return view('Index.cate.cate',['cateId'=>$id]);
    }
}

2, App\Http\Controllers\Index\BaseController.php  公共控制器在构造函数中 分配 变理cateId的默认值为0

public function __construct()
    {
        $this->getCates();
        $this->hotArts();
       View::share('cateId',0);

    }

3,\resources\views\Index\Layout\left.blade.php 增加@if  @endif判断,如果是当前栏目则增加active类名,再设置.active的相关样式 ,从而达到当前栏目高亮

 <style>
        .active{background-color:#ff0000; }
        li.active a{color:#fff;}
    </style>
    <nav id="primary-nav" class="primary-navigation phone_menu_col_4">
        <div class="menu-primary-container">
            <ul id="primary-menu" class="sf-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">

                @foreach($cateRes as $cate)
                <li class="@if($cate['id'] == $cateId) active @endif">
                    <a href="{{route('index.cate.index',array('id'=>$cate['id']))}}" aria-current="page">{{$cate->cate_name}}</a>
                </li>
                @endforeach

            </ul></div>

效果如下

END

posted @ 2020-05-22 10:55  pensive2019  阅读(182)  评论(0)    收藏  举报