根据导航中选择的链接更改div的背景图像

Question

i'd like to change the background image of a div depending on wich link is selected in my navigation!

exemple : let's say I have a menu item called :

#nav li.menu-item-59

when the link is selected it changes to

#nav li.menu-item-59.selected a

I'd like that whenever one of the menu item is selected the background image of the div footer change to a different file...

I've read some articles about sibling operators but can't seem to make it work and I'm not sure it is the best way to go .. can anyone help? thanks ! :D

Answer 1

It looks like you're using JS to add the class of selected to the menu. At the same time you're adding that, also add the the menu item name to the footer. something like:

var menuName = $(this).attr('id');
$('.footer').addClass(menuName);

Then in your css for the footer, add the class to the end of the element:

.footer.menu-item-59 {
  // background goes here
}

based on your fiddle below, try:

$(window).scroll(function(){   
  for(var i = 0; i < sections.length; i++)
    if($(window).scrollTop() +5 >= sections[i].top &&
    $(window).scrollTop() <= sections[i].bottom){
      sections[i].link.addClass('selected')
      .siblings().removeClass('selected');
      var selection = 'selected' + i; // new stuff starts here
      $('footer #flag').removeAttr('class');
      $('footer #flag').addClass(selection);
    }
});