Question

I have a menu that is using jQuery plugin to change the content of the div on the main page, all seems to be working fine till here, further from here I just want to change the background image of the site with each content.

I have the following markup in my page:

<nav>
  <ul>
    <a id="home" href="/" class="switcher">
      <li class="link">Home</li>
    </a>
    <a id="wid" class="switcher">
      <li>Content One</li>
    </a>
    <a id="srv" class="switcher">
      <li>Content Two</li>
    </a>
    <a id="cnt" class="switcher">
      <li>Content three</li>
    </a>
  </ul>
</nav>

And I have written the following jQuery code in my js file:

$("nav a").click(function () {
    $('body').css('background-image', 'url(../../Content/img/ ' + (this).id + '.jpg)').fadeIn('fast');
});

But this whole thing is not working, I have search over but from that information I think my code is OK which of course it’s not. What mistake am I making?

Answer 1

you should do

$(function(){
    $("nav a").click(function() {
        $('body')
          .css('background-image', 'url(../../Content/img/' + (this).id + '.jpg)')
          .fadeIn('fast');
    });
});

so you just forgot the Document Ready part:

$(function(){

//put your code here

});