Question

I have this code which loads my content inside the same div, fading in and out the different parts when I click on the menu. But I can’t use any link pointing to another website. When I click on those kind of links I made, it clears the div of its content and doesn’t open the link.

Any solution?
I also tried adding a target attribute, it doesn’t work.

Here the JQuery and HTML parts.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  document.documentElement.className += " js";   
  $(function(){
    var $containers = $("#animators > div").hide();
    $containers.eq(0).show();

    $('a').each(function(i,el){
      var idx = i;
      $(this).click(function(e){
        var $target = $containers.filter(':eq(' + idx + ')');
        if($containers.filter(':visible').not($target).length){
          $containers.filter(':visible').fadeOut(400, function(){
            $target.not(':visible').fadeIn(400);
          });
        } else {
          $target.not(':visible').fadeIn(400);
        }

        e.preventDefault();
      })
    })
  });
</script>




<div id="animators">
    <div class="container">
    <p><a class="content" href="http://www.google.com" title="Google>Google</a></p>
Text and content here #1
    </div>
    <div class="container">
Text and content here #2
    </div>
</div>

Answer 1

You have e.preventDefault(); in your CLICK event handler which means it prevents default behavior of <a> tag – opening a link.
If you need this prevention for some reasone then use document.location = link or window.open() function to open new tab.