Reputation: 379
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>
Upvotes: 0
Views: 298
Reputation: 1771
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
.
Upvotes: 2