opening different html files from jquery tabs
I have been trying to use jquery tabs to launch html pages(within the same page) but somehow failing at it repeatedly. Seems like a simple enough thing, but in all my attempts either the tabs stop working or the page doesn't open.
Here's what I am trying to achieve - my index.html page with multiple tabs(say a,b,c). i have the individual pages a.html, b.html and c.html written and want them to be opened in the same page(below the tabs) such that the tabs are omnipresent. What would be the easiest way to get this working? I have开发者_开发技巧 tried simply calling the html pages or even using iframes, but nothing seems to work. Also, when I tried using iframes, the frame wasn't using the full height of the page available to it, but only say 20% of it(in latest firefox).
I know this is probably too trivial a question and might have been caused by some silly mistake at my end, but I have literally spent more than a week in trying to get this to work and am,now, at my wit's end!
Any help would be much appreciated! Thanks{ edited the post to add relevant code snippets}
<body>
...
<div id="navigation" class="menu">
<ul class="tabNavigation">
<li><a href="#A">A</a></li>
<li><a href="#B">B</a></li>
<li><a href="#C">C</a></li>
</ul>
</div>
<div>
<!--tab contents -->
<div class="panes">
<div id="A">A Content<p> tab A content</p>
<iframe src="a.html"></iframe></div>
<div id="B">B Content <p> tab B content</p>
<iframe src="b.html"></iframe></div>
<div id="C">C Content<p> tab C content</p>
<iframe src="c.html"></iframe></div>
</div>
</div>
<!-- JS to activate the tabs -->
<script>
$(function()
{
var tabContainers = $('div.tabs > div');
$('div.tabNavigation ul.tabs a').click(function()
{
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
</body>
{Edited with specific code} You could simply put the tabs on every page. The pages will reload but the tabs will be in the same place.
If the reload bothers you you're going to have to call the content of the html pages using javascript.
This script will call the html out of the pages and put the html into the panes of the divs with corresponding letters. This should serve what you are trying to achieve with iframes but without the iframes of course.
<script type="text/javascript">
$(document).ready(function() {
$.get("a.html", function(data){
$(#A).append(data);
});
$.get("b.html", function(data){
$(#B).append(data);
});
$.get("c.html", function(data){
$(#C).append(data);
});
});
</script>
加载中,请稍侯......
精彩评论