<!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. Ehcache和MemCached区别及应用

    ehcache是纯Java编写的,通信是通过RMI方式,适用于基于java技术的项目.memcached服务器端是c编写的,客户端有多个语言的实现,如c,PHP(淘宝,sina等各大门户网站),Pyt ...

  2. [译文]casperjs使用说明-测试

    capserjs自带了一个测试框架,它提供了一个使你能够更容易的测试你的web应用的工具集. 注意: 1.1版本变更 这个测试框架,包括它的所有API,仅能使用在casperjs test子命令下 如 ...

  3. iOS学习笔记（1）－－认识Xcode6.1的Interface Builder和常用快捷键

    Interface Builder基本界面 红色区域为工具栏(Tool Bar) 蓝色区域为导航区(Navigator Area) 绿色区域为编辑区(Editor Area) 黑色区域是调试区(Deb ...

  4. Orleans MultiClient 多个Silo复合客户端

    目录 介绍 使用 简单例子 配置 注入到 DI 容器 添加多个 Client 全局 Orleans 服务配置 介绍 Orleans.MultiClient 是一个 Orleans 复合客户端,只需要简 ...

  5. leetcode-771-Jewels and Stones（建立哈希表，降低时间复杂度）

    题目描述: You're given strings J representing the types of stones that are jewels, and S representing th ...

  6. OpenFire 安装及配置

    下载 添加的属性为:EXE4J_JAVA_HOME,其属性的值为32位的JDK的所在位置.   2,openfire的启动路径中不能含有中文,好多java写的都是这个样.   3,如果安装的了 Jav ...

  7. 906 AlvinZH的奇幻猜想----整数乘积（背包DP大作战O）

    906 AlvinZH的奇幻猜想----整数乘积 思路 难题.动态规划. 将数字串按字符串输入,处理起来更方便些. dp[i][j]:表示str[0~i]中插入j个乘号时的乘积最大值.状态转移方程为: ...

  8. Go语言字符串

    Go语言的字符串是一个用UTF-8编码的变宽字符序列,它的每一个字符都用一个或多个字节表示 . 在Go语言中,没有字符类型,字符类型是rune类型,rune是int32的别称.可使用 []byte() ...

  9. 2019.4.2 HTML相关

    HTML页面的基本结构 html标签 页面的设置和文件的导入(页面标题) 要显示在页面上的标签 标签 h1---h6:一到六级标题 hr:分割线 br:换行 p:段落 em:斜体 strong:加粗 ...

  10. TestGc finalize()

    package com.gc; public class TestGc { public static void main(String[] args) { Man man = new Man(&qu ...