鼠标移到导航上面 当前的LI变色 处于当前的位置

鼠标移到导航上面当前的LI变色处于当前的位置,广泛应用于当前导航。点击这里查看效果以下是源代码:1234鼠标移到导航上面当前的LI变色处于当前的位置-柯乐义51314152

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

全栈程序员社区此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

鼠标移到导航上面 当前的LI变色 处于当前的位置,广泛应用于当前导航。

点击这里查看效果

以下是源代码:

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf8">
 4 <title>鼠标移到导航上面 当前的LI变色 处于当前的位置-柯乐义</title>
 5 <style type="text/css">
 6 ul,li{list-style:none;}
 7 #nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;float:left;}
 8 #nav li.h_nav_over{background:red;color:#fff;}
 9 #nav li.h_nav_over a{color:#fff;}
10 a{text-decoration:none;}
11 
12 </style>
13 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
14 
15 <script type="text/javascript">
16 $(function(){
17 $("#nav>ul>li").mouseover(function(){
18         $("#nav>ul>li").each(function(i){
19             $(this).removeClass("h_nav_over");
20         });
21         $(this).addClass("h_nav_over");
22     }).mouseout(function(){
23         $(this).addClass("h_nav_over");
24     });
25 });
26 </script>
27 
28 </head>
29 <body>
30 <div id="nav">
31      <ul>
32         <li><a  href="http://keleyi.com" >首页</a></li><li><a  href="http://keleyi.com/a/bjac/2208fcb8.htm" >品牌商机</a></li>
33         <li><a  href="http://keleyi.com/a/bjac/ec2s9a4n.htm" >精品商机</a></li><li><a  href="http://keleyi.com/a/bjac/m9p0je8s.htm" >最新商机</a></li>
34         <li><a  href="http://keleyi.com/a/bjac/iphgrtqm.htm" >投资考察会</a></li><li><a  href="http://keleyi.com/a/bjac/kjsrt3b0.htm" >在线交流区</a></li>
35      </ul>
36 </div>
37 </body>
38 </html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/120801.html原文链接:https://javaforall.net

(0)
上一篇 2021年12月20日 上午12:43
下一篇 2021年12月20日 上午12:43


相关推荐

  • windows 安装 yarn「建议收藏」

    windows 安装 yarn「建议收藏」windows安装yarn下载node.jshttp://nodejs.cn/download/通过Chocolatey安装以管理员身份打开cmd.exe@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe"-NoProfile-InputFormatNone-ExecutionPolicy…

    2022年5月12日
    37
  • M1芯片Mac 安装git

    M1芯片Mac 安装gitM1 芯片 Mac 安装 git 本文 git 安装是使用了 mac 下的包管理工具 homebrew 如果你还没有安装 那真是太不应该了 作为一个开发人员 首先你要安装 homebrew 因为它实在是太方便了 homebrew 安装教程 M1 芯片 MacHomebrew 安装直接使用 homebrew 安装即可 brewinstallg 配置查看是否已配置 cd ssh 如果不能进入该目录 说明没生成过 检查下是否配置过 git 账户 gitconfiglis 重

    2026年3月18日
    2
  • 5分钟速成!0基础用AI做3D手办,成本低到哭(保姆教程)

    5分钟速成!0基础用AI做3D手办,成本低到哭(保姆教程)

    2026年3月15日
    3
  • vue 集成高德地图进行批量标注和信息窗体展示

    vue 集成高德地图进行批量标注和信息窗体展示                                   vue集成高德地图进行批量标注和信息窗体展示         高德地图进行地理位置的标注和信息窗体展示是我们很常用的一个功能,其实高德api里面已经清楚的说明怎么用了,但是自己总结一下记录在自己的笔记里,也是有些许好处的。高德api样列展示地址是:https://lbs.amap.com/api/javascript…

    2022年5月21日
    68
  • 服务器大文件传输速度,大文件如何快速传输

    服务器大文件传输速度,大文件如何快速传输在这个互联网时代 信息更新速度逐渐加快 用户在进行文件传输时 一定是希望既稳定又快速的 并且还能够保证安全 但是通常来讲 FTP 文件传输并不能同时实现这三点的 特别是上传大文件时 FTP 上传文件速度明显减慢 那么用户如何快速传输大文件呢 为什么 FTP 上传大文件传输速度慢 FTP 协议自身的机制导致 FTP 一个最大的问题就是它使用两个连接 第一个连接用来发送控制指令 当接受或者发送数据的时候 又打开第

    2026年3月17日
    2
  • Java程序设计(高级及专题)- 泛型/容器(集合框架)

    Java程序设计(高级及专题)- 泛型/容器(集合框架)Java程序设计(高级及专题)- 泛型/容器(集合框架)

    2022年4月22日
    43

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号