<!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. [转] 以普通用户启动的Vim如何保存需要root权限的文件

    [转] 以普通用户启动的Vim如何保存需要root权限的文件 在Linux上工作的朋友很可能遇到过这样一种情况,当你用Vim编辑完一个文件时,运行:wq保存退出,突然蹦出一个错误: E45: 'rea ...

  2. mongodb常用语法

    // Employee表 { "_id" : "9e794fb9-12dc-457c-8c5a-69fe45c57685", "No" : ...

  3. QueryRunner(DBUtils) 结果集实例

    转自:http://www.cnblogs.com/myit/p/4272824.html#   单行数据处理:ScalarHandler    ArrayHandler    MapHandler  ...

  4. es put mapping

    fd dg public Map<String, Map<String, String>> javaBeanToMapping(Object instance, List< ...

  5. 高版本sonar安装遇到的坑-sonar 6.7.5

    最近安装了6.7.5版本的sonar,发现里面的坑还是很多,下面列举下遇到的坑 sonar插件地址:https://docs.sonarqube.org/display/PLUG/Plugin+Lib ...

  6. 百度ECharts数据绑定诀窍

    百度Echarts的功能还是蛮好用的.. 不能说多好但是也不次.. 下边就分享一些数据绑定经验..对在处理过程中的思路有一些帮助... 报表里用的最多的可以说是 饼状图和柱形图.. 饼状图里当然是包括 ...

  7. (转)haproxy启动故障：Starting proxy:cannot bind socke

    haproxy启动时提示失败: [ALERT] 164/110030 (11606) : Starting proxy linuxyw.com: cannot bind socket 这个问题,其实就 ...

  8. (转)MySQL Proxy使用

    转自: http://www.cnblogs.com/itech/archive/2011/09/22/2185365.html http://koda.iteye.com/blog/788862 h ...

  9. 【C语言】-指向一维数组元素的指针

    本文目录 一.用指针指向一维数组的元素 二.用指针遍历数组元素 三.指针与数组的总结 四.数组.指针与函数参数 说明:这个C语言专题,是学习iOS开发的前奏.也为了让有面向对象语言开发经验的程序员,能 ...

  10. Android控件之ListView的使用

    ListView是Android当中一个非常常用的数据显示控件. 第一种可以使用List<HashMap<String , Object>>,作为适配器的数据源来显示要显示的数 ...