导航栏图标切换：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>
导航栏图标切换：click事件，hover事件的更多相关文章
- jQuery----左侧导航栏面板切换实现
页面运行结果: 点击曹操 点击刘备 点击孙权 原图 需求说明:原图如上所示,点击一方诸侯的时候 ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- uniapp导航栏自定义按钮及点击事件
本文链接:https://blog.csdn.net/qq_33807889/article/details/89945674第一步:显示按钮假设页面名称为:AddSort 在pages.json中找 ...
- 20个Flutter实例视频教程-01节底部导航栏和切换效果的制作-1
视频地址: https://www.bilibili.com/video/av39709290?zw 博客地址: https://jspang.com/post/flutterDemo.html#to ...
- Swift 导航栏设置图片点击事件，图片蓝色的解决方案
如果导航栏想做一个点击事件,正好是一个图片 我们可以直接这样: self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIIm ...
- AndroidStudio制作底部导航栏以及用Fragment实现切换功能
前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...
- jquery中取消和绑定hover事件的正确方式
在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和mouseout事件有相同的效果,但是这其中其中如何使用bind去绑定hover方法呢?如何用unbind取消绑 ...
- Android开发技巧——实现在图标文本底部导航栏（更新）
本文参考了导航栏的代码viewpagerindicator实现. 本文介绍了之前版本号qq或者微信,添加文本,实现图标,导航栏的底部. 2014-09-14 13:59:42更新:library的代码 ...
- Android开发技巧——实现底部图标文字的导航栏（已更新）
本文章的导航栏代码参考了viewpagerindicator的实现.本文叙述的是之前版本的qq或微信中,底部的图标加文字的导航栏的实现. 2014-09-14 13:59:42更新:library的代 ...
随机推荐
- python接口自动化：调试接口的代码（无token情况下）
实现代码如下: #接口调试 import requests,time class api_demo1: def __init__(self,RequestWay,url,data): self.s=r ...
- 【MM系列】SAP MM中物料帐下修改物料的价格
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP 物料帐下修改物料的价格 ...
- PHPstorm Xdebugger最全详细
0 Xdebug调试的原理(选看) 图0-1 单机调试原理示意图 图0-2 多机调试原理示意图 对于PHP开发,初来咋到,开发环境的搭建和理解感觉是最烦人的一件事了.不像JAVA,打开一个Eclips ...
- Java中的常用类：包装类、String、StringBuffer、StringBuilder、Math、System、Arrays、BigInteger、BigDecimal、Data、Calendar
一.包装类 √ 二.String类 ★ 三.StringBuffer和StringBuilder类 ★ 四.Math类 五.System类 六.Arrays类 七.BigInteger类和BigDec ...
- [BZOJ4476] [JSOI2015] 送礼物 (01分数规划+ST表)
[BZOJ4476] [JSOI2015] 送礼物 (01分数规划+ST表) 题面 给出n,k,l,r和序列a,要求从a中选一段连续的区间[i,j]出来,使得M(i,j)-m(i,j)/(j-i+k) ...
- HDU 6697 Closest Pair of Segments（线段距离）
首先最容易想到的就是N2暴力枚举所有线段去找最小值,但是这样会做了许多无用功.我们可以先对线段排序,使得线段最左侧的端点按照x轴y轴排序,然后我们可以限定在这个线段的矩形框内的所有线段才有可能产生最小 ...
- Dubbo一文入门
一.简介 系统的架构,已从最早的单体式架构(一个war包完事)逐渐发展到目前的微服务式架构.微服务,将一个大型的复杂的应用系统,拆分成若干独立的松耦合的小的服务工程,每个服务工程可独立部署,每个服务只 ...
- Pandas 时间序列处理
目录 Pandas 时间序列处理 1 Python 的日期和时间处理 1.1 常用模块 1.2 字符串和 datetime 转换 2 Pandas 的时间处理及操作 2.1 创建与基础操作 2.2 时 ...
- CSS文字，文本，背景，盒模型等记录
文字: font-family:" "; /*设置字体*/ font-size:6px;/*设置文字字号*/ color:red;/*设置文字颜色*/ font-weight:bo ...
- javascript Math取整&获取随机数
1.方法介绍 Math.ceil(n) 上取整,大于等于n返回与它最接近的整数 Math.floor(n) 下取整,小于等于n返回与它最接近的整数 Math.round(n) 四舍五入取整 Math. ...