Question

当用户点击链接时，我想更改水平菜单的背景图像。我只是遇到了一些麻烦，我的代码如下：

<div class="grid_16" id="menu">
  <ul id='menuTab' class='sqglDropMenu'>
      <li><a href='Home' onclick='changeIt();'>Home</a></li>
      <li><a href='profile' onclick='changeIt();'>Profile</a></li>
      <li><a href='products' onclick='changeIt();'>Products</a></li>
      <li><a href='samples' onclick='changeIt();'>Samples</a></li>
      <li><a href='contact' onclick='changeIt();'>Contact</a></li>
  </ul>
</div>

我的JS看起来像这样：

function changeIt(){    
  document.getElementById('menuTab').style.backgroundImage = "url(../images/tab_off.png)";
    }

我的CSS，设置了初始背景图片：

.sqglDropMenu li {float: left; list-style: none; text-align:left; margin-left:5px; position: relative; display: block; line-height: 30px;}
.sqglDropMenu li a {display: block; white-space: nowrap; float: left; text-align:center; font-size: 1.3em; color: #fff;  font-weight:bold; padding-top:5px; margin-top:-1px; background:url(../images/menu_tab.png) no-repeat; width:182px; height:58px;}
.sqglDropMenu li ul {float:left; position: absolute; visibility: hidden; z-index:1000; margin: 0; margin-top:50px; * margin-top: 0px; clear:both; margin-left:-475px; background:url(../images/menuback.png) no-repeat; width:944px; height:60px}
.sqglDropMenu li ul li{float: left; position: relative; clear: left; border-width:0px; display: inline; margin: 0;}
.sqglDropMenu li ul li a{margin-left:20px; border-width:0px; text-align:left; font: 9pt Arial; adding:5px 12px; z-index:100; width: 100px; background:none;}
.sqglDropMenu li ul li a:hover{border-width:0px; background:none;}

任何帮助表示赞赏......问候，斯蒂芬

Answer 1

当您点击该链接时，您将被重定向到所选页面，因此您的功能将毫无用处，您可以使用

执行您想要的操作

php获取当前页面并设置设置所需背景的锚点类
javascript使用它和php：D一样，你可以通过做这样的事情来做到这一点：

var path = window.location.pathname; var page = path.substring（path.lastIndexOf（'/'）+ 1）; if（page =='currentpage.html'）{ 文件撰写（“当前页”） } else { 文件撰写（“当前页”） }

我希望这有助于你

Answer 2

试试此代码

<script type="text/javascript">
$('a').on('click',function(e){
    var var1 = this.href.split('='+img+')');
    e.preventDefault();
    switch(var1[1]){
    case 'Home':
      img = 'first.jpg';
      break;
    case 'About':
      img = 'second.jpg';
      break;
   } 
   $('body').css({backgroundImage:'url(image/'+img+')'});
});

Answer 3

您的浏览器将被重定向到href属性中的值，该属性是您的链接名称。请改用changeIt(); return false处理程序中的onclick。

Answer 4

尝试设置background属性：

function changeIt() {
  document.getElementById('menuTab').style.background = "url(../images/tab_off.png)";
}

<li>可能会阻止背景可见。你能否直接将这种风格应用到样式表中，看看会发生什么？

点击更改背景图片

4 个答案: