CODEWITHSUNDEEP
jquerycss
Leon
Leon

Reputation: 33

JQuery not removing background image if .active class

i'm having trouble with jquery not removing a background image.

i'm using Zurb's Foundation framework with deep-linking and have some code in this form (i've chopped out quite a bit of the html):

<div id="contentWrap">
  <section id="one" class="mixed">
    <a href="#">One</a>
    <div class="content"></div>
  </section>   
  <section id="two" class="mixed active">
    <a href="#">One</a>
    <div class="content"></div>
  </section>
</div>

i'm using css to set #contentWrap with a background image but i only want the image to show when the first link is active.

i'm using this JQuery code:

// Add background image if #one clicked
$('#one a').click(function(){
  $("#contentWrap").css("background-image","url('xx.jpg')");
});

// Remove background image if #two clicked
$('#two a').click(function(){
  $("#contentWrap").css("background-image","none");
});

// Remove background image if #two has class of .active
if ( $("#two").hasClass("active") ) {
  $("#contentWrap").css("background-image","none")
};

if the page is loaded with the second tab active via deep-linking (i.e. xx.com/#two), the background image is still loaded.

i used to have this working but have since made several updates to the way the code is loaded on the (wordpress) site and am now using jQuery(document).ready(function($) to wrap all the other JS (which is working).

any help greatly appreciated.

Upvotes: 0

Views: 1893

Answers (1)

Rafael Herscovici
Rafael Herscovici

Reputation: 17104

if i got you right, when two div is active, only then the background should be removed?

// Remove background image if #two clicked
$('#two a').click(function(){
   // Remove background image if #two has class of .active
    if ( $("#two").hasClass("active") ) {
      $("#contentWrap").css("background-image","none")
    };
});

working jsfiddle: (changed background-image to background) http://jsfiddle.net/Vvg5F/4/

Upvotes: 1

Related Questions