导航栏图标切换：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>
js导航栏下拉菜单<script>
$(function(){
$("li").click(function() {
$(this).siblings('li').removeClass('selected');          // 删除其他兄弟元素的样式
$(this).addClass('selected');                            // 添加当前元素的样式
});
});
</script>
</body>
</html> 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。