js中导航栏背景改变实例

本文主要和大家分享js中导航栏背景改变实例,希望能帮助到大家。

使用到this关键字

nbsp;html>                    导航栏改变背景                    *{margin: 0;padding: 0;}            #p1{width: 600px;height: 50px;position: relative;margin: 100px auto;background: black;}            #p1 ul{position: absolute;top:0;left: 0;}            #p1 ul li{list-style-type: none;width: 100px;height: 50px;text-align: center;                        line-height:50px;float: left;cursor: pointer;font-size: 18px;color:white;}            .active{background-color: #006400;}                            window.onload=function(){                function change1(){                    var op= document.getElementById('p1');                                        var oLi = op.getElementsByTagName('li');                                        for(var i=0;i<oLi.length;i++){                        oLi[i].onmouseover=function(){                            this.className='active';                        }                        oLi[i].onmouseout=function(){                            this.className='';                        }                    }                }                change1();            }                        

            

登录后复制                天猫超市                天猫国际                喵鲜生                电器城                医药馆                苏宁易购                        

相关推荐:

如何使用css选择器来实现导航栏背景图的切换?

以上就是js中导航栏背景改变实例的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2782811.html

(0)
上一篇 2025年3月8日 16:39:02
下一篇 2025年3月8日 16:39:08

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • js数组以及sort方法详解

    本文主要和大家分享js数组以及sort方法详解,js中的数组的length,既可以获取又可以设置,本来长度是6,设置成3时,此时数组里的值只有前三个,所以可以用来清空数组 。 push(4),往数组尾部添加一个4,pop()是在尾部删除一个…

    编程技术 2025年3月8日
    200
  • js面向对象实例讲解

    关于js面向对象的知识我们已经和大家分享过很多,本文主要和大家分享js面向对象实例讲解,希望能帮助到大家。 nbsp;html>function people(name,age){this.name = name;this.age =…

    编程技术 2025年3月8日
    200
  • js中的事件委托

    本文主要和大家分享js中的事件委托实例详解,我们主要和大家分享两个内容1.事件委托的原理以及优缺点 2. 手写原生js实现事件代理,并要求兼容浏览器。 q:事件的委托(代理 delegated events)的原理以及优缺点 A:委托(代理…

    编程技术 2025年3月8日
    200
  • js执行机制实例详解

    想要理解JavaScript的运行机制,需要分别深刻理解几个点:JavaScript的单线程机制、任务队列(同步任务和异步任务)、事件和回调函数、定时器、Event Loop(事件循环)。 JavaScript的单线程机制 javascri…

    2025年3月8日
    200
  • JS内置对象实例详解

    Date 日期对象 日期对象可以储存任意一个日期,并且可以精确到毫秒数(1/1000 秒)。 定义一个时间对象 : var Udate=new Date();  注意:使用关键字new,Date()的首字母必须大写。 使 Udate 成为日…

    编程技术 2025年3月8日
    200
  • js滑动动画效果实例分享

    本文主要和大家分享js滑动动画效果实例,希望大家能学会使用js制作简单的滑动动画效果。 JS animation *{ margin: 0; padding: 0; } p{ background-color: green; width: …

    编程技术 2025年3月8日
    200
  • Three.js使用对象组合实例方法

    将多个模型放到一个组里面,就是一个对象组合。 创建组非常简单,每个你创建的网格都可以包含子元素,子元素可以使用add函数来添加。在组中添加子元素的效果是:你可以移动、缩放、旋转和变形父对象,而所有的子对象都将会受到影响。  对象组合的实现 …

    编程技术 2025年3月8日
    200
  • 使用js或者jq设置滚动条实现方法分享

    js原生方法scrollTojs原生设置x轴和y轴就一个方法,首先获取到dom对象,然后设置位置即可, dom.scrollTo(x,y); //x为水平方向的滚动条位置,y为垂直方向的滚动条位置 登录后复制 如果只想设置y轴的滚动条位置,…

    编程技术 2025年3月8日
    200
  • js重新赋值原生的方法

    js的原生方法被覆盖掉以后,如果你还没让原生方法又从新指向一个新的变量名,那就gg了。所以,关键就是怎么再获取到原生的方法。实现的原理呢就是创建一个新的window对象,然后从新的window对象里面获取原生的方法,来重新赋值。 使用ifr…

    编程技术 2025年3月8日
    200
  • 全屏滚动插件fullpage.js的使用详解

    这次给大家带来全屏滚动插件fullpage.js的使用详解,全屏滚动插件fullpage.js使用的注意事项有哪些,下面就是实战案例,一起来看一下。 这两天公司网页改版用到fullpage.js这个滚屏插件,页面内容整屏的滚动,不成问题,各…

    2025年3月8日
    200

发表回复

登录后才能评论