Question

我想开发一个使用图像作为我的菜单按钮的应用程序，但是，我想模糊未点击的其他图像或更改单击的图像的颜色。请帮我解决这个问题，我是使用angularjs的新手
系统状态

        <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">System<br>Settings</p>                       
            </a>             
        </div>

         <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">Time and Date<br></p>                       
            </a>             
        </div>

         <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">Firmware<br>Update</p>                       
            </a>             
        </div>

        <div class="col-sm-2 col-xs-6">
            <a class="thumbnail setting_subcatalog_icon" href="#">
                <img class="img-responsive" src="image/subcatalog_system_1_h.png" alt="">
                <p class="subcatalog_name_h">USB<br>Devices</p>                       
            </a>             
        </div>
      </div>

Answer 1

我希望我能正确理解你的问题。请查看此Codepen

说明：在ng-class中，如果toggleObject.item值等于列表的索引值，则我给出一个条件，然后将类设置为image-active。在控制器中，我已将toggleObject.item初始化为-1，因此如果您不单击该项，则条件将无法满足，并且图像活动类将不适用。

CSS：

.image-active{
filter: blur(0px) !important;
   -webkit-filter: blur(0px) !important;
}

.image-deactive{
  filter: blur(20px);
   -webkit-filter: blur(20px);

}

HTML：

 <img class="image-deactive" ng-class="{'image-active' : toggleObject.item == $index}" ng-src={{client.image}} alt="">

控制器：

$scope.toggleObject = {item: -1};

Angular JS，图像菜单

1 个答案: