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


相关推荐

  • Java开发已经烂大街,没前途了?假的

    Java开发已经烂大街,没前途了?假的经过了多年的发展,Java早已由一门单纯的计算机编程语言,演变为了一套强大的技术体系。在程序员中,Java开发工程师就占据20%的比例,不可否认,Java语言有着广泛的行业发展前景,它在行业中的影响力已是不可避免的。所以许多人想通过学习Java转行、找好工作,所以报班学习Java开发的人越来越多。很多人说Java开发已经烂大街了,现在学Java没前途。真的是这样的吗?现在学Java还有前途吗?本文,给大家详细解答一下。1、Java人才缺口大根据职友集数据显示,Java开发的全国招聘量123805条。从

    2022年7月8日
    253
  • OnTouch关于performClick的Warning

    OnTouch关于performClick的WarningOnTouch关于performClick的Warning当你对一个控件(例如FloatingActionButton)使用setOnTouchListener()或者是对你的自定义控件重写onTouchEvent方法时会出现这个警告,警告内容全文如下IfaViewthatoverridesonTouchEventorusesanOnTouchListenerd…

    2022年6月16日
    33
  • 介绍几种SSIS部署方式

    介绍几种SSIS部署方式

    2021年11月26日
    69
  • 最简单的 MyBatis Plus 的多表联接、分页查询实现方法

    最简单的 MyBatis Plus 的多表联接、分页查询实现方法一、前言最近在加强ITAEM团队的一个app项目,人员配备:安卓+前端+后台后台DAO层借鉴了华工其他软件开发团队,使用了新颖强大的MyBatisPlus框架,里边有一个类似百度贴吧的发帖子的功能:而如果设计表,应为帖子表t_postidtitle标题content内容xxuser_id用户外键用户表t_userid…

    2022年5月31日
    35
  • 【Unity技能】做一个简单的NPC

    【Unity技能】做一个简单的NPC

    2022年1月2日
    50
  • nginx解决前端跨域问题_ajax跨域请求cors

    nginx解决前端跨域问题_ajax跨域请求cors通过Nginx模块HttpHeadersModule来添加Access-Control-Allow-Origin允许的地址。在Nginx的conf目录下修改nginx.conf,添加以下代码location~*\.(eot|ttf|woff|svg|otf)${add_headerAccess-Control-Allow-Origin*;}//eot|tt

    2022年8月24日
    5

发表回复

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

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