单击时更改背景图像

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

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

1. php 通过获取当前页面并设置用于设置您想要的背景的锚点的类或
2. javascript 来执行您想要的操作使用它与 php :D 相同，您可以通过执行以下操作来完成此操作：

var path = window.location.pathname;
var page = path.substring(path.lastIndexOf('/') + 1);
if (page == 'currentpage.html'){
document.write('当前页')
} 别的 {
document.write('当前页')
帮助

我希望这对你有

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();而是在 onclick 处理程序中返回 false。

Answer 4

尝试设置 background 属性：

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

可能是

阻止背景可见。您可以将此样式直接应用到样式表中并看看会发生什么吗？