jQuery实现简单导航栏的样式切换
style css样式部分:
ul{
margin: 0 auto;
height: 50px;
background-color: #369;
}
ul>li{
text-decoration: none;
display: inline-block;
height: 50px;
line-height: 50px;
color: #fff;
padding: 0 15px;
border-left: 1px solid #365;
}
.active,ul>li:hover{
background-color: #fff;
color: #369;
cursor: pointer;
}
html部分:
<ul>
<li>首页</li><li>关于我们</li><li>产品中心</li><li>新闻中心</li><li>关于我们</li>
</ul>
方法一:https://www.jkys120.com/article/95498/
$li = $('ul>li');
// console.log($li);
$li.bind('click',function(){
$this=$(this);
$this.addClass('active');
$this.siblings().removeClass('active');
console.log('111');
});https://www.jkys120.com/article/95498/
方法二:(原生Js)
for(let i = 0 ;i < navs.length; i++){
navs[i].onclick = function(e){
let activedNav = this.parentNode.querySelector('.active');
if(activedNav == this){
return;
}
activedNav.className = '';
this.className = 'active';
}
}
jQuery实现简单导航栏的样式切换的更多相关文章
- css制作最简单导航栏
css制作最简单导航栏
- jquery侧边折叠导航栏制作,两行代码搞定
jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...
- 微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar
在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修 ...
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
- 【1-4】jQuery代码风格-导航栏
实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...
- Jquery实现动态导航栏和轮播导航栏
动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...
- Swift - 修改导航栏的样式(文字颜色,背景颜色,背景图片)
默认情况,导航栏UINavigationController的样式如下,如果想要使用代码修改样式也是比较简单的. 1,修改导航栏背景色 1 2 3 //修改导航栏背景色 self.navigation ...
- iOS 要定义自己的导航栏button样式Button Image 执行出彩是不一样的与原来的颜色 -解
在相机闪光灯,在导航栏中自己定义"闪"样式.点击变换的图像期望,但一直没有变化.原来是该条款的Global Tint颜色.因此,系统会自己主动改变图片的颜色Global Tint颜 ...
- 运用active和hover实现导航栏的页面切换
.nav ul li a:hover{ background: #3E6EDD;}.nav ul li a:hover img{ display: block;}.nav ul li a.active ...
随机推荐
- Postgresql operator does not exist: numeric = character varying
)),series_name from svcm_t_series_res: 原来series_id是numeric型,现在转换为varchar(64):
- 数据库 Hash Join的定义,原理,算法,成本,模式和位图
Hash Join只能用于相等连接,且只能在CBO优化器模式下.相对于nested loop join,hash join更适合处理大型结果集 Hash Join的执行计划第1个是hash ...
- (尚026)Vue_案例_动态初始化显示(尚025)
(1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组 ...
- WinDbg常用命令系列---显示段选择器dg、链接列表dl和字符串ds/dS
dg (Display Selector) dg命令显示指定选择器的段描述符. dg FirstSelector [LastSelector] 参数: FirstSelector指定要显示的第一个选择 ...
- 3-STM32物联网开发WIFI(ESP8266)+GPRS(Air202)系统方案升级篇(HTTP介绍,TCP实现HTTP下载文件)
https://www.cnblogs.com/yangfengwu/p/10357564.html 看了好多文章.....唉,还是自己亲自动手用网络监控软件测试吧 先看这个节安装WEB服务器.... ...
- c++中二叉树的先序中序后序遍历
c++中二叉树的先(前)序.中序.后序遍历 讲解版 首先先看一个遍历的定义(源自度娘): 所谓遍历(Traversal),是指沿着某条搜索路线,依次对树中每个结点均做一次且仅做一次访问.访问结点所做的 ...
- mysql ,with rollup的用法
如下,可以看到使用后,也统计了null的个数. mysql> select * from table1; +----------+------------+-----+------------- ...
- [内网渗透]HASH获取与HASH传递
0x01 PTH简介 PTH,即Pass-The-Hash,首先我们来说下为什么要使用HASH传递,一是在目标机>=win server 2012时,lsass.exe进程中是抓不到明文密码的, ...
- css文字两行或者几行显示省略号
做这个省略的问题,突然发现显示省略号是有中英文区分的 我做两行的时候用的是以下代码,在是中文的情况下是么得问题,到了英文下发现不起作用了 width: 250px; overflow: hidden; ...
- Alpha总体规划 & 任务分解
目录 Alpha阶段项目目标 任务拆解和优先级 总体规划 Alpha-1任务分配 Alpha-2任务分配 Alpha阶段项目目标 初步实现北航社团小程序: 北航社团小程序基础功能(优先级中的高两级,即 ...