jQuery点击导航栏选中更换样式的实现代码


Posted in Javascript onJanuary 23, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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>
 <title> new document </title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <body>
 <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.7.1.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>
 </body>
</html>

jQuery点击导航栏选中更换样式的实现代码

以上所述是小编给大家介绍的jQuery点击导航栏选中更换样式的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 #Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 #Javascript
jQuery弹出层插件popShow用法示例
Jan 23 #Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 #Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 #Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 #Javascript
canvas绘制表盘时钟
Jan 23 #Javascript
You might like
一个多文件上传的例子(原创)
2006/10/09 PHP
4.与数据库的连接
2006/10/09 PHP
中篇:安装及配置PHP
2006/12/13 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
教你如何使用php session
2013/10/28 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
Laravel 队列使用的实现
2019/01/08 PHP
jQuery的一些注意
2006/12/06 Javascript
用javascript实现自定义标签
2007/05/08 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
js Html结构转字符串形式显示代码
2011/11/15 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
jQuery插件制作之参数用法实例分析
2015/06/01 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
JS判断非空至少输入两个字符的简单实现方法
2017/06/23 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
代码分析Python地图坐标转换
2018/02/08 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
关于建议书的格式范文
2014/05/20 职场文书
治安消防安全责任书
2014/07/23 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书