jQuery关于导航条背景切换
效果如下:
<DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<meta charset="UTF-8">
<style>
.nav{height:40px; width: 100%;background: #E6E6E6;}
.nav ul li{float: left;list-style: none;margin-right: 20px;line-height: 40px;}
.nav ul li a{text-decoration: none; display: block;width: 60px; text-align: center;}
.onNav{font-weight: bold;color:#fff; background: #ccc;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#" class="onNav">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
<script type="text/javascript">
$(".nav ul li a").click(function(){if($(this).has(".onNav")){
$(this).addClass("onNav").parent("li").siblings("li").find("a").removeClass("onNav");}})
</script>
</body>
</html>
js部分:
<script type="text/javascript">
$(".nav ul li a").click(function(){if($(this).has(".onNav")){ //找到a标签添加click事件,判断是否有背景存在
$(this).addClass("onNav").parent("li").siblings("li").find("a").removeClass("onNav");}}) //添加类并移除已有的类
</script>
上面是一种方法,以下是另外一种:
<script type="text/javascript">
$(".nav ul li a").click(function(){ //找到a标签并添加click事件
var inx = $(this).parent("li").index(); //定义变量inx,返回这个元素在同辈中的索引位置
$(".nav ul li").find("a").removeClass("on_nav"); //移除已有的类
$(".nav ul li").eq(inx).find("a").addClass("on_nav"); //获取点击元素并添加类
</script>
jQuery关于导航条背景切换的更多相关文章
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- 分享一个自己写的基于JQuery的一个Web背景切换的Demo
这个效果主要有两个特点: 1. 背景切换的渐变 2. 背景大小自适应 3. 背景自适应保持比例同时, 相对居中 js源码: (function ($) { $.fn.bgChange = functi ...
- vuejs导航条动态切换active状态
用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历 重点是在:routerLink(index, path)函数,传入当前点击的下 ...
- Jquery | 基础 | 导航条在项目中的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用jquery.backstretch插件,背景切换
//首页自动更换背景特效开始============================================1.引用文件<script src="jquery.js" ...
- jQuery控制导航条样式
原理:点击当前元素时,当前元素添加(样式类),父辈的兄弟姐妹的孩子('a')去掉此样式类. 代码如下: /*次要导航*/ $(".subnav li a").click(funct ...
- 分享21个基于jquery菜单导航的效果
jquery导航菜单插件制作jquery动画菜单熔岩灯菜单效果更新时间:02月15日 14:53:03 虾米精选-菜单导航-导航菜单 0浏览 / ★★★☆☆星级 / 未知软件大小/ jquery导航菜 ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 【iOS开发-22】navigationBar导航条和navigationItem设置:基本搞定导航条上的文字和按钮以及各种跳转
http://blog.csdn.net/weisubao/article/details/39646739?utm_source=tuicool&utm_medium=referral (1 ...
随机推荐
- XMLHTTP使用具体解释
XMLHTTP对象是Microsoft的MSXML开发包中带的一个用HTTP,XML协议訪问web资源的对象. 从MSXML3.0開始出现. 它在AJAX技术中主要用来从其它网络资源获取信息,然后由j ...
- js上传文件获取客户端地址
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用 jQuery Masonry 插件创建瀑布流式的页面(转)
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
- linux僵死进程的产生与避免
作者:lingdxuyan来源:ChinaUnix技术博客,本文版权由lingdxuyan所有,如需转载,请注明出处. 一个进程在调用exit命令结束自己的生命的时候,其实它并没有真正的被销毁, ...
- 电商ERP常见功能模块
电商ERP是适用企业卖家的专业电子商务ERP,支持淘宝.天猫.京东.1688.当当.苏宁.拍拍.唯品会.亚马逊.独立B2C等多网络销售渠道:也包括 异地多仓..货位管理.智能配货等专业的WMS(仓 ...
- Android_Handler
xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...
- linux系统学习(常用命令)
今天调休,闲来无事,研究一下linux系统. Linux常用命令: 一:文件管理 ctrl+alt:在虚拟机与windows之间切换ctrl+g:进入linux输入模式 pwd:查看当前目录 ls:列 ...
- poj 1182 食物链(关系并查集)
食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 62824 Accepted: 18432 Description ...
- [MSDN]关键字查询语言 (KQL) 语法参考
MSDN:http://msdn.microsoft.com/library/ee558911(v=office.15) 了解如何构造 SharePoint 2013 中的搜索功能 的 KQL 查询. ...
- Activiti源码浅析:Activity与Task
最近由于接触到Activiti工作流引擎,因此粗读了一下它的源码. 总结了一些内容如下,这些内容一般的doc上都是没有提及的. 1. model.Activity与model.Task Activit ...