Change visibility on all div's

Change visibility on all div's

Hello,

I'm working on a private project for school and I'm working with tabs. Only now everything works perfectly in FireFox but when I try to open it in IE7 it's full of problems.

<script type="text/javascript">
   $('.tabs').tabs({ fxShow: { height: 'show', opacity: 'show' }, fxSpeed: 'normal' });
   $(document).ready(function() {
      $(".tabs_menu").slideUp("normal");
      $(".tabs_menu").html($(".tabs").html());
      $(".tabs_menu").slideDown("normal");
        tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
        imgLoader = new Image();// preload image
        imgLoader.src = tb_pathToImage;
    });
   $(function () {
      $(".tabNavigation li a").click(function() {
          var string = $(this).attr("href");
             $('#text div').removeClass('visible');
          $('#text div').addClass('invisible');
          $(string).removeClass('invisible');
          $(string).addClass('visible');
      });
   });
</script>


This is my code which I am working with. The problem is that the listener doesn't react in IE7 but one that looks like this listener does work.

Here my HTML code
<div class="tabs">
       <ul class="tabNavigation">
            <li><a href="#biography"><span>Biografie</span></a></li>
            <li><a href="#music"><span>Muziek</span></a></li>
          <li><a href="#movie"><span>Film</span></a></li>
            <li><a href="#sports"><span>Sport</span></a></li>
        </ul>
     </div>

I'm hoping that you might know the solution to this problem cause i'm beginning to get desperate .

Thanks on advance.[/code]