• thinkphp点击导航变色


    1.从该处进入导航页面,点击分贝进入点击的页面。

    2.点击1处进入对应的导航栏,导航栏变色。

    3.在1图图片点击跳转是给地址添加参数status。

    4.在后台IndexController.class.php处接收status的值并赋值给前台。

    5.前台用hidden值接收status的值

    6.写jquery,关联状态值

    7. active的值先写好css属性

    .ser_box{100%;height:100%;overflow-y:auto}
    .ser_header{100%;height:90px;}
    .ser_headc{85%;height:90px;border-bottom:1px solid #C4DBED;margin:0 auto;}
    .ser_left{20%;height:90px;float:left;}
    .ser_center{60%;height:90px;float:left;}
    .ser_right{19%;height:90px;float:left;text-align:right;font-size:12px;}
    
    .ser_text{vertical-align:middle;margin-left:45px;}
    .ser_ul{list-style:none;overflow:hidden;margin:0 auto;100%;}
    .ser_ul li{float:left;height:40px;line-height:40px;border:1px solid #C4DBED;border-bottom:none;}
    .ser_li{12%;}
    .ser_li_speical{14%;}
    
    .img1{background:url(../images/dowers.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}
    .img1.active{background:url(../images/dowers_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    .img1:hover{background:url(../images/dowers_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    
    .img2{background:url(../images/housekeep.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}
    .img2.active{background:url(../images/housekeep_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    .img2:hover{background:url(../images/housekeep_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    
    .img3{background:url(../images/mall.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}
    .img3.active{background:url(../images/mall_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    .img3:hover{background:url(../images/mall_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    
    .img4{background:url(../images/checkin.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}
    .img4.active{background:url(../images/checkin_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    .img4:hover{background:url(../images/checkin_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    
    
    .img5{background:url(../images/payment.png)no-repeat;background-size: 22px 22px;background-position:10px;color:#636162;}
    .img5.active{background:url(../images/payment_w.png)no-repeat;background-size: 22px 22px;background-position:10px;color:#FFF;background-color:#557FB9;}
    .img5:hover{background:url(../images/payment_w.png)no-repeat;background-size: 22px 22px;background-position:10px;color:#FFF;background-color:#557FB9;}
    
    .img6{background:url(../images/tool.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}
    .img6.active{background:url(../images/tool_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    .img6:hover{background:url(../images/tool_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#FFF;background-color:#557FB9;}
    
    
    .img7{background:url(../images/complaints.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}
    .img7.active{background:url(../images/complaints_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#fff;background-color:#557FB9;}
    .img7:hover{background:url(../images/complaints_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#fff;background-color:#557FB9;}
    
    .img8{background:url(../images/car.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#636162;}
    .img8.active{background:url(../images/car_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#fff;background-color:#557FB9;}
    .img8:hover{background:url(../images/car_w.png)no-repeat;background-size: 22px 22px;background-position:20px;color:#fff;background-color:#557FB9;}
  • 相关阅读:
    上周热点回顾(5.9-5.15)团队
    上周热点回顾(5.2-5.8)团队
    上周热点回顾(4.25-5.1)团队
    .NET跨平台之旅:升级ASP.NET Core示例站点团队
    上周热点回顾(4.18-4.24)团队
    上周热点回顾(4.11-4.17)团队
    如何在Eclipse中正确安装Jetty插件并初步使用(图文详解)
    Spark Mllib里如何采用保序回归做回归分析(图文详解)
    机器学习概念之梯度下降算法(全量梯度下降算法、随机梯度下降算法、批量梯度下降算法)
    程序代码里出现illegal character 'ufeff' 和 expected class or object definition的解决办法(图文详解)
  • 原文地址:https://www.cnblogs.com/yangzailu/p/6296020.html
Copyright © 2020-2023  润新知