鼠标移到导航上面 当前的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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • POST ARCHIVE FACTION_hunting

    POST ARCHIVE FACTION_huntingToday,theCloudNativeComputingFoundation(CNCF)acceptedTiKV,anopensourcedistributedtransactionalkey-valuedatabase,intotheCNCFSandboxforearlystageandevolvingcloudnativeprojects…

    2022年9月14日
    2
  • 物业管理系统源码java_Java小区物业管理系统 源码报告下载

    物业管理系统源码java_Java小区物业管理系统 源码报告下载小学期实习就弄了个这…留作纪念.技术上突飞猛进的三周,教会了我一些做人的道理,尤其是:团队合作时的木桶效应….整个后端不是我做的,但是我还是改了好多,要不然总不可能让废柴坐那玩手机吧…其实并没有什么卵用…Bootstrap主题不错,不过里面好多文件冗余还不敢删…上传了完整的工程文件,docs目录里是部分文档…系统功能用户登录管理:这是系统的必要部分,通过它可…

    2022年9月2日
    6
  • ubuntu 7.04 ‘s sources list

    ubuntu 7.04 ‘s sources list

    2021年5月1日
    88
  • 阿里巴巴主流数据库连接池Druid入门

    阿里巴巴主流数据库连接池Druid入门一.数据库连接池的必要性(一).传统数据库连接模式的的步骤1.在主程序中创建连接2.进行sql操作3.关闭数据库连接(二).传统数据库连接模式存在的问题1.浪费时间:每次连接时都要验证登录和将conn加载到内存,2.不能大规模的访问数据库:当数据库访问人数过多时,占用大量系统资源,会导致服务器崩溃3.存在内存泄漏问题:每次连接都需要断开连接,如果不断开,程序运行结束,会有创建的连接对象存在内存中一直无法关闭,就会导致java内存…

    2022年7月23日
    10
  • 2022年 – 2023年 最新计算机毕业设计 本科 选题大全 汇总

    2022年 – 2023年 最新计算机毕业设计 本科 选题大全 汇总文章目录0前言1javaweb管理系统毕设选题2javaweb平台/业务系统毕设选题3游戏设计、动画设计类毕设选题(适合数媒的同学)4算法开发5数据挖掘毕设选题6大数据处理、云计算、区块链毕设选题7网络安全毕设选题8通信类/网络工程毕设选题9嵌入式毕设选题10开题指导0前言Hi,大家好,这里是丹成学长,大四的同学马上要开始毕业设计啦,大家做好准备了没!学长给大家详细整理了计算机毕设最新选题,对选题有任何疑问,都可以问学长哦~1javaweb

    2022年7月20日
    19
  • 771服务器cpu性能排行,CPU114查询网

    771服务器cpu性能排行,CPU114查询网4485083264155WQ4201954736564128225WQ2201964606764128200WQ220197392991632155WQ420198392701632105WQ4201910358722448180WQ420191333158122465WQ2201914318681224105WQ22019183067912246…

    2022年9月20日
    5

发表回复

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

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