jquery实现点击变换导航样式的方法
更新时间:2015年08月31日 15:55:39 作者:企鹅
这篇文章主要介绍了jquery实现点击变换导航样式的方法,可实现点击导航菜单选项时动态变换对应选中项样式的功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery实现点击变换导航样式的方法。分享给大家供大家参考。具体如下:
这里分享一个导航点击变换样式的代码,近来看到很多网站的导航都是点击后导航样式跟着变化,今天就使用jqurey简单实现这一功能,高手勿喷。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/jquery-click-cha-nav-style-codes/
具体代码如下:
<!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程序设计有所帮助。
相关文章
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏),需要的朋友可以参考一下2013-05-05比较简单的jquery教程 Easy Ajax with jQuery 中文版全集
比较简单的jquery教程 Easy Ajax with jQuery 中文版全集...2007-11-11jQuery选中select控件 无法设置selected的解决方法
select 控件的 option用jQuery动态添加,然后选中某项时,IE6不能执行(火狐没问题),用try{}catch(err){alert(err.description);}提示为“无法设置selected属性 未指明的错误”2010-09-09jQuery插件slick实现响应式移动端幻灯片图片切换特效
jQuery插件slick是一款响应式、适用于移动设备触摸屏、可滑动显示的jQuery幻灯片插件。该幻灯片插件可以设置多种显示效果,可以自动播放,是一款移动优先的jQuery幻灯片插件。2015-04-04
最新评论