AngularJS动态切换样式

比眉伴天荒 2022-06-18 01:12 252阅读 0赞

AngularJS相比原生的js或者jquery有着很大不同，对于一个简单的鼠标点击不同选项，动态切换样式该怎么实现呢。

本文实现的是点击某个标题，标题字体加粗，并随之切换相应的div内容，如下（点击推荐或热点）

20170327224210574

20170327224231856

Ok.，实现过程

  1. html代码

    1.      <div class="comTitStyle">
    2.          <div>
    3.              <a ng-click="titleClick(0)" ng-class="{'selected':focusIndex==0}" class="selected">推荐</a>
    4.          </div>
    5.          <div>
    6.              <a ng-click="titleClick(1)" ng-class="{'selected':focusIndex==1}">热点</a>
    7.          </div>
    8.      </div>

  1. 控制器代码

    .controller(‘newsCtrl’, function($scope) {

    1.                  //定义要聚焦的索引
    2.                  $scope.focusIndex=0; //默认显示推荐板块
    4.                  $scope.recHide = false;
    5.                  $scope.hotHide = true;
    7.                  $scope.titleClick = function(index){
    8.                      $scope.focusIndex=index; //点击切换样式
    10.                      if(index == 0){
    11.                          $scope.recHide = false;
    12.                          $scope.hotHide = true;
    13.                      }else if(index == 1){
    14.                          $scope.recHide = true;
    15.                          $scope.hotHide = false;
    16.                      }
    17.          }
    18.      })

  1. 附上包括.selected在内的CSS样式

    .comTitStyle{

    1.  width: 16rem;
    2.  height: 2rem;

    }
    .comTitStyle > div{

    1.  display: inline-block;
    2.  width: 7.9rem;
    3.  height: 2rem;
    4.  vertical-align: middle;
    5.  text-align: center;
    6.  line-height: 2rem;

    }
    .comTitStyle > div > a{

    1.  width: 2.5rem;
    2.  height: 1.9rem;
    3.  display: inline-block;
    4.  vertical-align: middle;
    5.  font-size: .8rem;
    6.  color: #666666;

    }
    .comTitStyle > div > .selected{

    1.  border-bottom: 1px solid #3BB4C1;
    2.  font-weight: bold;

    }

  1. 好了，在浏览器运行试试，放心，没错的！

发表评论

表情：
评论列表 （有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

    相关 AngularJS动态切换样式

    AngularJS相比原生的js或者jquery有着很大不同，对于一个简单的鼠标点击不同选项，动态切换样式该怎么实现呢。 本文实现的是点击某个标题，标题字体加粗，并随之切换相

    比眉伴天荒比眉伴天荒/ 0 赞/ 253 阅读