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 相关文章推荐
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
js清空表单数据的两种方式(遍历+reset)
Jul 18 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
canvas实现图像截取功能
Feb 06 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
详解JS数组方法
Nov 20 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
海贼王:最美的悬赏令!
2020/03/02 日漫
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php 邮件发送问题解决
2014/03/22 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
2018/01/08 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
[03:24][TI9纪实] Dota奶爸
2019/08/22 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
go和python变量赋值遇到的一个问题
2017/08/31 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
环境工程专业自荐信范文
2014/03/18 职场文书
实习报告评语
2014/04/26 职场文书
班级课外活动总结
2014/07/09 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
新店开张宣传语
2015/07/13 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
全网非常详细的pytest配置文件
2022/07/15 Python