<!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. P4365 [九省联考2018]秘密袭击coat

    $ \color{#0066ff}{ 题目描述 }$ Access Globe 最近正在玩一款战略游戏.在游戏中,他操控的角色是一名C 国士 兵.他的任务就是服从指挥官的指令参加战斗,并在战斗中取胜. ...

  2. 数论 CF230B T-primes

    CF230B T-primes 我们知道质数是只有两个不同的正数因数的正整数.相似的,我们把一个正整数 t 叫做 T质数,如果 t 恰好有三个不同的正整数因数. 你被给了一个含有 n 个正整数的数组. ...

  3. POJ-2251-Dungeon Master（3D迷宫，BFS）

    Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 48111   Accepted: 18149 ...

  4. Nodejs连接数据库为何使用连接池

    问题一.nodejs既然是单线程运行,在连接数据库时为何要使用连接池呢? 问题二,redis服务端是单线程运行的,使用连接池到redis,服务端还是串行处理,有什么意义么? 这两个问题都涉及到单线程与 ...

  5. 1.Bootstrap简介

    Bootstrap简介 BootstrapAPI: https://v3.bootcss.com Bootstrap优点: 响应式布局,一个框架,多种设备适用 Bootstrap 是最受欢迎的 HTM ...

  6. 机器学习中的范数规则化之 L0、L1与L2范数、核范数与规则项参数选择

    装载自:https://blog.csdn.net/u012467880/article/details/52852242 今天我们聊聊机器学习中出现的非常频繁的问题:过拟合与规则化.我们先简单的来理 ...

  7. fastdfs-client-java操作fastdfs

    一.在https://github.com/happyfish100/fastdfs-client-java 下载客户端,解压后并执行ant命令,在E:\tools\libs\fastdfs\fast ...

  8. mysql 2006 go away 错误

    https://blog.csdn.net/yypsober/article/details/71330673 原文地址.

  9. python正则表达式记录

    元字符: *  星号   它指定前一个字符可以被匹配零次或更多次 >>> re.match('a[bcd]*b', 'abcbdabcd').group() 'abcb' >& ...

  10. appium解决无法通过name属性识别元素org.openqa.selenium.InvalidSelectorException: Locator Strategy 'name' is not supported for this session

    执行代码.: public AndroidDriver<AndroidElement> appiumDriver; appiumDriver.findElement(By.name(&qu ...