Question

This question is quite specific to the code i’m trying to use, 1st ill admit I don’t know how to write in jQuery, I more hack/manipulate existing scripts but I will learn at some stage but I need a fix to a current problem.

Basically I have a simple tab layout that swaps out content, my issue is the content that I’m swapping out is generated from a CMS so the links inside #screen take you to a different page. What I would like to do is keep the content within the #screen div by either manipulating the a href or maybe its something I can only achieve with an iframe but id like to stay away from that if possible. Sorry if my explanation isn’t clear code below.

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
    .content {display:none;}
    .tab {cursor:pointer; width:20%; float:left; text-align:center; color:#fff; padding:10px;}
    #screen {clear:both; padding:20px 0 0 0;}
    </style>
    <script>
    $(document).ready(function(){
    var $content1 = $('.content').first().clone();
    $content1.css("display", "block");
    $('div#screen').html($content1);
    $(".tab").live("click", function() {
    var $content = $(this).next('div.content').clone();
    $content.css("display", "block");
    $('div#screen').html($content);}
    );
    });
    </script>
    <div class="tab">
    Tab Title
    </div>
    <div class="content">
    <a href="toplevelpage/pageexample.html">Link</a><br />
    <a href="toplevelpage/pageexample2.html">Link2</a><br />
    <a href="toplevelpage/pageexample3.html">Link3</a>
    </div>
<div class="tab">
    Tab Title2
    </div>
    <div class="content">
    <a href="toplevelpage/pageexample.html">Link</a><br />
    <a href="toplevelpage/pageexample2.html">Link2</a><br />
    <a href="toplevelpage/pageexample3.html">Link3</a>
    </div>
<div id="screen">
</div>

Answer 1

To load content into a div you can use load() – http://api.jquery.com/load/:

$('a').on('click',function(e){
    e.preventDefault();
    $('div.content').load($(this).attr('href'));
});

You’ll probably want to select those links with a class though, because otherwise every link on your page will load into content.