html导航栏切换,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部分：

首页
关于我们
产品中心
新闻中心
关于我们

方法一：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';

}

html导航栏切换,jQuery实现简单导航栏的样式切换相关推荐

隐藏导航条HTML,jQuery实现的导航条切换可显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 代码如下: 导航条在项目中的应用 $(function(){ ...
点击导航高亮 html,jQuery实现的导航条点击后高亮显示功能示例
本文实例讲述了jQuery实现的导航条点击后高亮显示功能.分享给大家供大家参考,具体如下: www.jb51.net jQuery导航条点击后高亮显示 #nav li {float: left; wi ...
导航菜单：jQuery粘性滚动导航栏效果
粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...
楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航
jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...
导航菜单 gooey-menu jQuery液态融合（gooey）样式导航菜单插件（精）
gooey-menu是一款基于SVG过滤器的液态融合(gooey)样式导航菜单jQuery插件.通过该插件你可以非常轻松的制作出各种gooey样式的环形菜单特效. 查看原文查看在线演示Demo和更多 ...
html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效
这是一款效果非常酷的jQuery和CSS3圆形图片切换特效.该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画.可以任意设置多张图片进行来回翻转.旋转切换,效果堪称一流. 使用 ...
java手风琴代码_[Java教程]18款jquery抽屉式手风琴导航特效代码
[Java教程]18款jquery抽屉式手风琴导航特效代码 0 2015-11-12 21:00:05 jquery hover抽屉式导航图片展开收缩代码 jQuery仿瑞丽鼠标滑过图片手风琴展开特效 ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
用jQuery实现一些导航条切换，显示隐藏
用jQuery实现一些导航条切换,显示隐藏,主要运用的技术有slideToggle( ),toggeClass( ),toggle( ): 源码下载地址代码如下: <!DOCTYPE html ...

html导航栏切换,jQuery实现简单导航栏的样式切换

html导航栏切换,jQuery实现简单导航栏的样式切换相关推荐

最新文章

热门文章