Change background image on click

I'm want to change the background image of my horizontal menu when the user clicks on a link. I'm just having a bit of trouble, my code is as follows:

<div class="grid_16" id="menu">
  <ul id='menuTab' class='sqglDropMenu'>
      <li><a href='Home' onclick='changeIt();'>Home</a>&开发者_如何学编程lt;/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>

My JS looks like this:

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

My CSS, where the initial background image is set:

.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;}

Any help appreciated....regards, Stephen

when you click on the link, you are redirected to the selected page so your function will be useless, you can do what you want either using

1. php by getting the current page and set the class of the anchor that sets the background you want or
2. javascript using it the same as php :D, you can do this by doing something like this:

var path = window.location.pathname; var page = path.substring(path.lastIndexOf('/') + 1); if (page == 'currentpage.html'){ document.write('CurrentPage') } else { document.write('CurrentPage') }

I hope this helps you

Try this code

<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+')'});
});

Your browser will get redirected to the value in the href attribute, which is the name of the link for you. Use changeIt(); return false in the onclick handlers instead.

Try setting the background property:

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

It could be that the <li>s are preventing the background from being visible. Can you apply this style directly into the stylesheet and see what happens?