js 导航条切换页面按钮背景图片随着变换

发布网友发布时间：2022-04-28 21:31

共3个回答

懂视网时间：2022-05-15 12:11

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

热心网友时间：2022-05-15 09:19

背景图片你需要放到一个容器中假设是这样的外层用main div当容器

导航容器是menu 里面的按钮都是用的li 那么你没回只需要用js改变menu的background就行

menu.style.backgroundImage="aa.jpg";

menu.style.background=url("aa.jpg")
如果是color直接输入即可;

热心网友时间：2022-05-15 10:37

JS改变样式知道写吗？
自己在CSS里写每个栏目写2个样式
当点击当前样式的时候就改变成第二个样式名称就行了
当然在前面要先吧所有的样式都改为第一个样式名称。追问这需要判断当前连接的吧