导航栏图标切换：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的代 ...
随机推荐
- char数组初始化
初始化 char str[10]="Hello"; char str[10]={'H','e','l','l','o','\0'}; char str[10]={'H'}; cha ...
- python2.7打印中文乱码的问题解决
一. import sys reload(sys) sys.setdefaultencoding('utf-8') print('测试中文') 二. print(‘我是中国人’) >>&g ...
- ModelForm基本使用
介绍 Django提供Form和ModelForm两种表单验证方式.相比较Form,ModelForm可以直接与与数据库表相关联,不需要像Form那样需要手动逐一字段添加表单验证的字段.且可以随意选择 ...
- java 多态 （知识点不完整）
1.多态的条件 1.要有继承 2.方法重写 3.父类引用指向子类对象 多态中成员访问 1. 访问成员变量: 编译看左边,运行也看左边 f.num = 10 因为这里是父类的,看是父类Father ...
- 本地启oracle实例服务无法重启，协议适配器错误
今天遇到一位朋友的oracle实例服务无法起来,启动时报错: 分析的原因是可能早上服务器突然断电造成的,经过对tns的测试 经过我们讨论和诊断,最后诊断的处理方法是将实例删了重装,处理后服务恢复正常: ...
- 埃及分数问题（带乐观估计函数的迭代加深搜索算法-IDA*）
#10022. 「一本通 1.3 练习 1」埃及分数 [题目描述] 在古埃及,人们使用单位分数的和(形如 $\dfrac{1}{a}$ 的,$a$ 是自然数)表示一切有理数.如:$\dfrac{ ...
- 构造函数与new的汇编实现
this指针,通常是通过ecx传递:gcc是通过堆栈传递的,是最后一个被压栈.传递this指针是为了访问成员变量.除了虚函数,所有成员函数被编译之后都是全局函数.mov eax,[ecx] ; 将第一 ...
- hihocoder1954 : 压缩树
传送门 首先求出缩一个点 $x$ 的贡献,就是缩 $x$ 的父亲的贡献加上 $x$ 的子树多减少的深度 假设此时缩父亲的贡献已经考虑过了,那么 $x$ 的子树多减少的深度就是子树的节点数 注意此时要满 ...
- 发现一个好的后台模板 xtreme admin
Xtreme Admin Dashboard 是基于 bootstrap 4 的管理仪表板和控制管理面板. Xtreme 是完全响应的 HTML 模板,基于 CSS 框架 Bootstrap 4 并基 ...
- Windows10测试低版本IE方法
前端开发工程师可能了解IETester是一款IE多版本兼容性测试软件,但是只支持Windows Xp,Vista,7,8系统,Windows10是不支持的,网上所说的开启.net framework ...