JQuery UI tabs load specific link inside tab
I only want to load links inside a specific div inside a tab, otherwise it should just go to the actual link.
The current code I am using loads all links inside content in the same tab
<script type="text/javascript">
$(function(){
$('#tabs').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
var tabId=$('#tabs').tabs('option', 'selected');
$('#tabs').tabs("url", tabId, this.href).tabs("load",tabId);
return false;
});
}
});
});
</script>
Tab page
<div id="sresults" style="width: 520px">
<div id="tabs">
<ul>
<li><a href="mylink.html">Songs</a></li>
<li><a href="mylink.html">Albums</a></li>
<li><a href="mylink.html">Videos</a></li>
<li><a href="mylink.html">Entire Blog</a></li>
</ul>
</div>
</div>
And then it displays the page inside a tab
<div id="content">
<a href="permalink.html">My links</a>
</div>
<div id="navi"><a href="tab?page=2">Next Page</a>
</div>
I want the links inside the navi div to load inside the tab, but all links outside should go to the actual link
+2
source to share
1 answer
I am assuming you want to download navigation links inside a tab.
If so, just replace
$('a', ui.panel).click(function() {
FROM
$('#navi a', ui.panel).click(function() {
Although I suggest you use class
to select your div instead of using div id
, because you might end up with duplicate id
s, which might cause problems later.
+2
source to share