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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
php中给js数组赋值方法
Mar 10 Javascript
canvas实现图像放大镜
Feb 06 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 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
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
javascript一点特殊用法
2008/05/28 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
使用AngularJS 应用访问 Android 手机的图片库
2015/03/24 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
2014年大学生四年规划书范文
2014/04/03 职场文书
房产委托公证书
2014/04/08 职场文书
关于建议书的格式范文
2014/05/20 职场文书
捐款活动总结
2014/08/27 职场文书
安全隐患整改报告
2014/11/06 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
人事主管岗位职责
2015/02/04 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
MySQL插入数据与查询数据
2022/03/25 MySQL
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL