使用点击处理程序（JS）隐藏和显示div在Firefox中不起作用

Question

I have a click function that captures a clicked link and hides and un-hides some divs based one the following script:

$(".link").bind('click', function() {
  //link handler
  event.preventDefault();  //prevents url from changing
  // $(window).resize();  //testing something else
  var value = $(this).attr("href");  //grab hash link of li that was clicked and call it 'value'
  if ($(value).hasClass("active")) {
    return false  //if you click on the link that's already visible, don't do anything
  } else {
    $(value).removeClass("hidden").parent().find(".active").addClass("hidden").removeClass("active");  //unhide the div we want, find current active div and hide it
    $(value).addClass("active");  //classify the now visible div as active
  };
});

My .hidden class hides a div using display:none, and the .active class is my way of identifying the currently showing div.

It works perfectly in Chrome, but no dice in FireFox or Internet Explorer. Any help is much appreciated!

EDIT: Here's my css:

.hidden {
  display:none

}

.active doesn't have any rules, i just use it to identify the visible div.

Here's a fiddle: http://jsfiddle.net/j7df7/

Answer 1

appears to be the event.preventDefault(); that is stopping execution in firefox. Comment that out and test again. Also, as sheriffderek mentioned, you probably should pass in an event so that your code knows what it is.

Answer 2

Is this what you looking for?

$(".link").click(function () {
var value = $(this).attr("href"); //grab hash link of li that was clicked and call it 'value'

if(!$(value).hasClass('active'))
{
    $(value).addClass('active').removeClass('hidden');
    $(value).siblings('div').addClass('hidden').removeClass('active');
}


});

Answer 3

Here's a working JSFiddle update that works with; Chrome, Internet Explorer and FireFox. I've steamlined your code, for example, instead of:

$(value).removeClass("hidden").parent().find(".active").addClass("hidden").removeClass("active")

There is now just:

 $(".active").attr('class', 'hidden');

I have also changed your

$(".link").on('click', function () {

To just (FireFox requires you put put an 'event' parameter in your code in order for it to work)

$(".link").click(function (event) {

Anyway, here's the JSFiddle: http://jsfiddle.net/j7df7/3/
Here's a version where the divs have 2 classes, so you can keep one class for style and another for hiding: http://jsfiddle.net/j7df7/5/

Answer 4

WHAT ABOUT THIS! I'm not sure if this will fit for you --- but I recently got turned onto data-* and it's awesome... try this out. It's pretty darn eloquent..... FIDDLE

HTML

<ul class='menu'>
    <li><a href='#' data-display-item='.one'>Link 01</a></li>
    <li><a href='#' data-display-item='.two'>Link 02</a></li>
    <li><a href='#' data-display-item='.three'>Link 03</a></li>
</ul>

<div class="SPA-block one active-page">
    Div 01 (Active to start)
</div>

<div class="SPA-block two">
    Div 02
</div>

<div class="SPA-block three">
    Div 03
</div>

CSS

.SPA-block {
    display: none;
}

.active-page {
    display: block;
}

jQuery

$('.menu a').on('click',function() {
    $('.SPA-block').removeClass('active-page'),
    $($(this).data('display-item')).addClass('active-page');
    return false;
});