Jquery code working in Chrome but not in Firefox

问题:

I have this piece of code that reveals a couple of divs when it is clicked and then they are hidden once another link is clicked. I'm trying to get this to show in Firefox and it may not be a problem in the js but all help is greatly appreciated.

<script type="text/javascript">
    $(document).ready(function(){
            $('.fadein').click(function(){
                    // Make the id overview show
                    $('#header-contact').hide('slow'); 
                    $('#header-portfolio').show('slow');
                    $('#content-portfolio').show('slow');
                    // override default a behavior
                    return false;
            });
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
            $('.fadein2').click(function(){
                    // Make the id overview show
                    $('#header-portfolio').hide('slow');                       
                    $('#header-contact').show('slow');
                    $('#content-portfolio').hide('slow');
                    // override default a behavior
                    return false;
            });
    });

</script>
<script type="text/javascript">
    $(document).ready(function(){
            $('.fadein3').click(function(){
                    // Make the id overview show
                    $('#header-portfolio').hide('slow');                       
                    $('#header-contact').hide('slow');
                    $('#content-portfolio').hide('slow');
                    // override default a behavior
                    return false;
            });
    });

回答1:

Try passing the event to each of the click handlers and before you return false, call preventDefault() on the passed-in event object.

example:

$(document).ready(function(){
        $('.fadeinX').click(function(e){
                // Make the id overview show
                $('#header-portfolio').hide('slow');                       
                $('#header-contact').hide('slow');
                $('#content-portfolio').hide('slow');
                // override default a behavior
                e.preventDefault();
                return false;
        });
});

回答2:

Use Web Developer by Chris Pederic to clear the cache. I had exactly the same problem with Firefox and using the web developer to clear the cache solved it. Simple but you never know, and I had been pulling my hair out.

回答3:

You actually don't need to return false at all if you preventDefault();

 $(document).ready(function(){
   $('.fadein').click(function(e){
     // Make the id overview show
     $('#header-portfolio').hide('slow');                       
     $('#header-contact').hide('slow');
     $('#content-portfolio').hide('slow');
     // override default a behavior
     e.preventDefault();
   });
 });

Also move your JS into it's own file and only have one $(document).ready(function() {...}) function and you can put all three of your events in there.