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 css framework
Jun 28 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
vue2.0父子组件间通信的实现方法
Apr 19 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
vue-ajax小封装实例
Sep 18 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 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递归函数怎么用才有效
2018/02/24 PHP
js 页面输出值
2008/11/30 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Python使用三种方法实现PCA算法
2017/12/12 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
幼儿如何来做好自我评价
2013/11/05 职场文书
建筑经济管理专业求职信分享
2014/01/06 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
学校师德承诺书
2014/05/23 职场文书
销售员试用期自我评价
2014/09/15 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
高效课堂教学反思
2016/02/24 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书