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扩展自写的 UI导航
Jan 13 Javascript
JS定时关闭窗口的实例
May 22 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
js使用递归解析xml
Dec 12 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 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生成静态页面的简单示例
2014/04/17 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
python实现俄罗斯方块
2018/06/26 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
考试退步检讨书
2014/01/15 职场文书
单位委托书
2014/10/15 职场文书
杜甫草堂导游词
2015/02/03 职场文书
音乐剧猫观后感
2015/06/04 职场文书
初中政治教师教学反思
2016/02/23 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python