Question

I have a page that I am trying to make a generic style of tabs that this function will work with to basically hide all the tab content and reveal the one clicked on. It all works great except in Firefox where it is still firing off the default action and jumping the page when you click on the target. Oddly enough if you click on the one that is already open it doesn’t jump. In the example code there is just 2 tabs and sets of content but it could just as easy be more than that.

<div id="recentGalleryBox">
  <ul class="tabs">
    <li class="active"><a href="#recentVideo" title="latest videos">Latest Videos</a></li>
    <li class="last"><a href="#recentPhoto" title="latest photos">Latest Photos</a></li>
  </ul>
  <div class="tabsContent bgNone">
    <div id="recentVideo">
      <img src="http://i.ytimg.com/vi/Ymjh5ZV1H48/0.jpg" class="articleImage vidThumb" />      
      <p class="readmore"><a href="/galleries/videos" title="View all photos">View all video galleries</a></p>
    </div>  
    <div id="recentPhoto">
      <img src="/images/sized/dev/images/uploads/gallery/genericphoto-280x175.jpg" width="280" height="175"  alt="Album Image" class="articleImage" />
      <p class="readmore"><a href="/galleries/photos" title="View all photos">View all photo galleries</a></p>
    </div>
  </div>
</div>

$(document).ready(function(){
  $('#recentPhoto').hide();
  $('.tabs li a').click(function(e){
    var reveal = $(this).attr("href");
    var theid = ""
    $(this).parents('ul').children('li').removeClass('active');
    $(this).parent().addClass('active');
    $(this).parents('ul').next().children().each(function(idx, item){
      theid = "#"+$(item).attr("id");
      if (reveal != theid) {$(theid).hide();}
    });
    $(reveal).fadeIn();
    e.preventDefault();
  });
});

Answer 1

Not related, but you are missing a semicolon

var reveal = $(this).attr("href");
var theid = ""

— EDIT thanks @Interstellar_Coder for pointing that out 🙂
no semicolon after theid, parser is smart enough to add in missing semi colons, but it’s good to stay consistent.

The issue is when you call if (reveal != theid) {$(theid).hide();}, since the content basically only consists of that, the height of your whole document at one instance is 0 thus you perceive a “jumping” to the top caused by the click.

If you have an enough space below #recentGalleryBox the issue is gone

http://jsfiddle.net/B9M2k/14/