<!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. UItextInput-Protocol

    UItextInput是一个protocol,一般来说,文字处理的控件都要遵守这个协议.如UITextField,UITextView.下面介绍一些文字处理的基本概念. marked text 对于多 ...

  2. 本地搭建GitLab

    现在很多企业都开始使用gitLab,因为他的权限管理强大,后台项目管理也很方便.下面就介绍本地搭建方法: 为避免损失,建议在虚拟机测试.虚拟机最低配置(内存2G,cpu:2核,硬盘:20G) 1.安装 ...

  3. Git的一些用法（下）

    (4) 提交分支 提交分支命令 : 将本地的分支提交到 GitHub中; git push origin experiment (5) 分支合并移除 合并分支命令 : 合并分支之后, 分支中有的文件在 ...

  4. 【手记】如果Idx/Sub字幕导不进MKVToolNix，看看是否这个原因

    用记事本之类的文本编辑器打开idx文件,看看时间轴部分是不是存在不规范的条目,比如: timestamp: :::, filepos: 注意,上述条目中,filepos:后面缺了一个空格,就这么一处问 ...

  5. 修改testng源码，添加beforeMethod和afterMethod中的日志到test中（可以不改源码，废弃）

    在使用testng生成报告的时候,只会记录test方法中的日志,但是一般会在beforeMethod.beforeTest.afterMethod.afterTest中做一下数据的处理,这里面的日志没 ...

  6. Service与BoardcastReceive

    开发service需要两个步骤: 1.定义一个继承Service的子类 2.在AndroidMainfest.xml文件中配置该Service. Service与Activity都是从Context派 ...

  7. windows平台下Android studio开发环境搭建教程

    最近,Google 已宣布,为了简化 Android 的开发力度,以重点建设 Android Studio 工具,到今年年底将停止支持Eclipse等其他集成开发环境 .而随着Android stud ...

  8. awk练习

    首先,了解awk的运行格式 awk '条件类型1{动作1} 条件类型2{动作2} ...'  filename 1. [root@server3 mnt]# cat passwd root x 0 0 ...

  9. 移动端滑动时页面惯性滑动overflow-scrolling: touch

    -webkit-overflow-scrolling:auto | touch; auto: 普通滚动,当手指从触摸屏上移开,滚动立即停止 touch:滚动回弹效果,当手指从触摸屏上移开,内容会保持一 ...

  10. Unix_JDK安装及配置

    CentOS 下过程 JDK 在 CentOS 和 Ubuntu 下安装过程是一样的,所以这里不再讲 Ubuntu 系统下的安装 JDK 1.8 下载 此时(20170906)最新版本:jdk-8u1 ...