时间:2021-07-01 10:21:17 帮助过:5人阅读
本文主要和大家分享js中导航栏背景改变实例,希望能帮助到大家。
使用到this关键字
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>导航栏改变背景</title> <style> *{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;} </style> <script> 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(); } </script> </head> <body> <p id='p1'> <ul> <li>天猫超市</li> <li>天猫国际</li> <li>喵鲜生</li> <li>电器城</li> <li>医药馆</li> <li>苏宁易购</li> </ul> </p> </body></html>
相关推荐:
如何使用css选择器来实现导航栏背景图的切换?
以上就是js中导航栏背景改变实例的详细内容,更多请关注Gxl网其它相关文章!