js中导航栏背景改变实例

来源：懂视网责编：小采时间：2020-11-27 19:59:50

js中导航栏背景改变实例

js中导航栏背景改变实例:本文主要和大家分享js中导航栏背景改变实例，希望能帮助到大家。使用到this关键字<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>导航栏改变背景</title>

推荐度：

点击下载本文 文档为doc格式

导读js中导航栏背景改变实例:本文主要和大家分享js中导航栏背景改变实例，希望能帮助到大家。使用到this关键字<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>导航栏改变背景</title>

本文主要和大家分享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>

js中导航栏背景改变实例

推荐度：

点击下载本文 文档为doc格式

标签：背景改变 js

热门焦点

js中导航栏背景改变实例

js中导航栏背景改变实例

js中导航栏背景改变实例

最新推荐

猜你喜欢

热门推荐