<!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点击导航栏选中更换样式的更多相关文章

  1. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  2. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

  3. 【1-4】jQuery代码风格-导航栏

    实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

  4. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

  5. 在CSS中定义【导航栏】超链接样式

    1.案例css代码 <style> .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标 ...

  6. jquery版滑块导航栏

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  7. jQuery实现简单导航栏的样式切换

    style css样式部分: ul{ margin: 0 auto; height: 50px; background-color: #369;} ul>li{ text-decoration: ...

  8. JQuery Mobile - 导航栏选中状态代码

    class="ui-btn-active" 参考: https://wizardforcel.gitbooks.io/w3school-jqmobile/content/8.htm ...

  9. 导航菜单：jQuery粘性滚动导航栏效果

    粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...

随机推荐

  1. 5，临界区 之 lock

    前提背景:多个并发线程共享同一个资源时,为防止这些共享资源可能出现的错误或数据不一致问题,提出了临界区的概念 临界区: 指一个用以访问共享资源的代码块,这个代码块在同一时间内只能允许一个线程访问 实现 ...

  2. TCP 的保活定时器

    引言 可以没有任何数据流过一个空闲的 TCP 连接. 这意味着我们可以启动一个客户与服务器建 立一个连接,然后离去数小时.数天.数个星期或者数月,而连接依然保持.中间路由器可以崩溃和重启,电话线可以被 ...

  3. P3994 高速公路

    题目链接 题意分析 这是一道树上斜率优化题 首先 \[dp[i]=min\{dp[j]+(dis[i]-dis[j])* p[i]+q[i]\}(j∈Pre_i)\] 那么就是 \[p[i]=\fra ...

  4. HTML5本地存储——IndexedDB二：索引

    HTML5本地存储——IndexedDB(二:索引)   在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...

  5. win7 设置docker加速器

    本来专门已经有了一个源于docker加速器的了,公司的电脑是mac,配置很简单,但是我自己的电脑是win7,在实际操作的时候还真是累啊,官网的教程不知道为什么没起效果,所以最终还是找了其他人发的帖,可 ...

  6. python全栈开发_day11_作用域，函数嵌套和闭包

    一:作用域 1)什么是作用域 作用域是规定一个变量可以作用的范围,运行和销毁的范围 2)作用域的分类 1.内置作用域built_in:随着解释器的运行而产生,解释器运行的终止而销毁. 2.全局作用域g ...

  7. Go语言fmt包详解

    格式化输出函数 fmt包含有格式化I/O函数,类似于C语言的printf和scanf.格式字符串的规则来源于C,但更简单一些 1.print和println方法 print输出给定的字符串,如果是数值 ...

  8. I2C裸机驱动程序设计

    ① I2C(Inter-Integrated Circuit)总线是由飞利浦公司开发的两线式串行总线,用于连接微控制器及其外围设备 ② I2C总线有两根双向信号线 (1)SDA:Serial Data ...

  9. js 删除数组的某一项或者几项的方法

    1.arr.splice() splice(index,len,[item])    注释:该方法会改变原始数组. splice有3个参数,它也可以用来替换/删除/添加数组内某一个或者几个值 inde ...

  10. 文献综述二十：基于UML技术的客户关系管理系统实现

    一.基本信息 标题:基于UML技术的客户关系管理系统实现 时间:2015 出版源:电子设计工程 文件分类:uml技术的研究 二.研究背景 设计出可应用与银行和储户之间沟通的客户关系管理系统,从而实现对 ...