This allows you to display a number of different pages from your own site or external sites in a box with tabs to switch between them.
Paste the code below where you want it to appear on your page. Replace the links with whatever your would like to display in the tabs.
<!-- jQuery and jQuery UI are required if you're not already using them -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script>
$(function(){
$(".tabbedBrowser").tabs({
beforeLoad: function(e, ui) {
var href = ui.tab.children("a").attr("href");
if (ui.panel.children("iframe").length < 1) {
var iframe = '<iframe src="' + href + '" style="width:100%; border:0; height:400px;"></iframe>';
ui.panel.html(iframe);
}
return false;
}
});
});
</script>
<noscript>Tabbed Browser provided by <a href=\"http://www.top-site-list.com\">Top Site List Planet</a></noscript>
<div class="tabbedBrowser">
<ul>
<!-- Replace these links with your own -->
<li><a href="http://www.apple.com">Apple</a></li>
<li><a href="http://www.bing.com">Bing</a></li>
<li><a href="http://www.microsoft.com">Microsoft</a></li>
<li><a href="http://www.jquery.com">jQuery</a></li>
</ul>
</div>