导航栏图标切换：click事件，hover事件

最近再做一个基于angular6的项目，导航栏需求：1、hover切换图标 2、click切换图标

先用jquery实现功能，在在angular组件里面实现。

demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航栏图标切换</title>
  <style>
    ul{
      background-color: #0f0f0f;
      width: 50px;
    }
    li{
      height: 50px;
      width: 50px;
      display: block;
      cursor: pointer;
    }
    .li1{
      background: url("./img/nav/h1.png") no-repeat;
    }
    .li2{
      background: url("./img/nav/b1.png") no-repeat;
    }
    .li3{
      background: url("./img/nav/v1.png") no-repeat;
    }
    .li4{
      background: url("./img/nav/m1.png") no-repeat;
    }

    .li1:hover{
      background: url("./img/nav/h0.png") no-repeat;
    }
    .li2:hover{
      background: url("./img/nav/b0.png") no-repeat;
    }
    .li3:hover{
      background: url("./img/nav/v0.png") no-repeat;
    }
    .li4:hover{
      background: url("./img/nav/m0.png") no-repeat;
    }

    .li1.selected{
      background: url("./img/nav/h0.png") no-repeat;
    }
    .li2.selected{
      background: url("./img/nav/b0.png") no-repeat;
    }
    .li3.selected{
      background: url("./img/nav/v0.png") no-repeat;
    }
    .li4.selected{
      background: url("./img/nav/m0.png") no-repeat;
    }
  </style>
  <script src="js/jquery.min.js"></script>
</head>
<body>
<ul>
  <li class="li1"></li>
  <li class="li2"></li>
  <li class="li3"></li>
  <li class="li4"></li>
</ul>
<script>
    $(function(){
        $("li").click(function() {
            $(this).siblings('li').removeClass('selected');          // 删除其他兄弟元素的样式
            $(this).addClass('selected');                            // 添加当前元素的样式
        });
    });
</script>
</body>
</html>

　　

 

posted @ 2018-12-04 19:36  月上秦少  阅读(1145)  评论(0)  编辑  收藏  举报