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 相关文章推荐
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
js获取图片的base64编码并压缩
Dec 05 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
PHP新手入门学习方法
2011/05/08 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
layui 实现自动选择radio单选框(checked)的方法
2019/09/03 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
tensorflow实现从.ckpt文件中读取任意变量
2020/05/26 Python
使用Keras构造简单的CNN网络实例
2020/06/29 Python
浅析NumPy 切片和索引
2020/09/02 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
银行求职信个人范文
2013/12/16 职场文书
部队学习十八大感言
2014/01/11 职场文书
2014年师德承诺书
2014/05/23 职场文书
门店业绩提升方案
2014/06/08 职场文书
情人节活动总结范文
2015/02/05 职场文书
西岭雪山导游词
2015/02/06 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript