jquery实现点击变换导航样式的方法


Posted in Javascript onAugust 31, 2015

本文实例讲述了jquery实现点击变换导航样式的方法。分享给大家供大家参考。具体如下:

这里分享一个导航点击变换样式的代码,近来看到很多网站的导航都是点击后导航样式跟着变化,今天就使用jqurey简单实现这一功能,高手勿喷。

运行效果截图如下:

jquery实现点击变换导航样式的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航点击变换样式</title>
<style>
*{ margin:0; padding:0; border:0px; list-style:none; margin:0 auto;}
*a { text-decoration:none; color:#FFF;}
ul { width:800px; height:30px; background-color:#C33;}
ul li { float:left; width:160px; height:30px; line-height:30px; text-align:center; color:#FFFFFF;}
ul li a { color:#FFFFFF; display:block; width:160px; height:30px; text-decoration:none;}
.first { background-color:#0000FF;}
ul li a:hover {color:#FFF; display:block; width:160px; height:30px; text-decoration: underline; background-color:#03F;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function (){
  $("li").each(function(index){
  $(this).click(function(){ 
  $("li").removeClass("first");
  $("li").eq(index).addClass("first");
  });
  });
 });
</script>
</head>
<body>
<ul>
<li class="first"><a href="#">首页</a></li>
<li><a href="#">列表</a></li>
<li><a href="#">内容</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
常用的javascript function代码
May 23 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
用js实现放大镜效果
Oct 28 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 #Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 #Javascript
Bootstrap的图片轮播示例代码
Aug 31 #Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 #Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 #Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 #Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 #Javascript
You might like
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
python代码制作configure文件示例
2014/07/28 Python
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python PyTorch预训练示例
2018/02/11 Python
python Celery定时任务的示例
2018/03/13 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
安装python及pycharm的教程图解
2019/10/10 Python
解决Python二维数组赋值问题
2019/11/28 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
英语教师自荐信
2014/05/26 职场文书
应聘会计求职信
2014/06/11 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
python用字节处理文件实例讲解
2021/04/13 Python