导航栏图标切换：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的代 ...
随机推荐
- 【Unity】给物品添加力
给物体添加力 两个方法: Rigidbody.AddForce(Vector3,ForceMode):给刚体添加一个力,让刚体按世界坐标系进行运动 Rigidbody.AddRelativeForce ...
- docker--docker架构
4 docker 架构 Docker uses a client-server architecture. The Docker client talks to the Docker daemon, ...
- eclipse中常用的快捷键【开发常用到的】
1.全部选中:Ctrl+A 2.剪切Ctrl+X.复制Ctrl+C.粘贴Ctrl+V.保存Ctrl+S 3.撤销Ctrl+Z.取消撤销Ctrl+Y 4.规范代码:Ctrl+Shift+F 5.将代码更 ...
- C#Exception 追踪异常位置
1:在编写软件时,保护关键位置的代码正常运行,要对这位置进行异常处理try catch private void StartTCPServer() { try { ........//我们要确保知道这 ...
- Mybatis-基本步骤
1.1Mybatis框架概述 Mybatis是基于Java的持久层框架,内部封装了jdbc,使开发者只需关注sql语句本身,而不需要花费精力去处理加载驱动.创建连接.创建Statement等繁杂的过程 ...
- AcWing 802. 区间和
(https://www.acwing.com/problem/content/804/) 假定有一个无限长的数轴,数轴上每个坐标上的数都是0. 现在,我们首先进行 n 次操作,每次操作将某一位置x上 ...
- 洛谷P3502 [POI2010]CHO-Hamsters感想及题解（图论+字符串+矩阵加速$dp\&Floyd$）
洛谷P3502 [POI2010]CHO-Hamsters感想及题解(图论+字符串+矩阵加速\(dp\&Floyd\)) 标签:题解 阅读体验:https://zybuluo.com/Junl ...
- EOJ Monthly 2019.2 A. 回收卫星
题目传送门 题意: 你可以询问一个三维坐标,机器会告诉你这个坐标在不在目标圆中, 并且(0,0,0)是一定在圆上的,叫你求出圆心坐标 思路: 因为(0,0,0)一定在圆上,所以我们可以把圆心分成3个坐 ...
- Python 数据分析中常用的可视化工具
Python 数据分析中常用的可视化工具 1 Matplotlib 用于创建出版质量图表的绘图工具库,目的是为 Python 构建一个 Matlab 式的绘图接口. 1.1 安装 Anaconada ...
- 搜索（DFS）---矩阵中的连通分量数目
矩阵中的连通分量数目 200. Number of Islands (Medium) Input: 11000 11000 00100 00011 Output: 3 题目描述: 给定一个矩阵,求 ...