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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
星际RPG字典
2020/03/04 星际争霸
无线电广播的开始
2002/01/30 无线电
PHP5 面向对象(学习记录)
2009/12/02 PHP
Laravel+jQuery实现AJAX分页效果
2016/09/14 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
nodejs中使用HTTP分块响应和定时器示例代码
2017/03/19 NodeJs
React组件之间的通信的实例代码
2017/06/27 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
深入浅析Python传值与传址
2018/07/10 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Django框架模板用法入门教程
2019/11/04 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python str字符串转uuid实例
2020/03/03 Python
DHC中国官方购物网站:日本通信销售No.1化妆品
2016/08/20 全球购物
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
教师试用期自我鉴定
2014/02/12 职场文书
创新型城市实施方案
2014/03/06 职场文书
高三霸气励志标语
2014/06/24 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
致接力运动员加油稿
2015/07/21 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫