Home/ Questions/Q 8993173
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T23:08:04+00:00

I have jQuery UI tabs set up, but a problem that I’m having with

  • 0

I have jQuery UI tabs set up, but a problem that I’m having with links to different pages is that they load all contents of the page into the tab. This includes the footer, header, and other navbars that I don’t want in the tab. What if I would only like to load a single ID from that page?

My tabs are set up this way:

<div id="mytabs">
<ul>
 <li><a href="derpsite.com/awesomepage">Awesome page</a></li>
 <li><a href="derpsite.com/foo">Foo</a></li>
</ul>
</div>

Nothing much going on in the jQuery…

$(function() {
$( "#mytabs" ).tabs();
});

Let’s say this is the html of “awesomepage” (that the first link targets):

<html>
<head>
<title>awesome page</title>
</head>
<body>
<div id="header">bla</div>
<div id="awesomeness">awesomeness!</div>
<div id="footer">fdsfd</div>
</body>
</html>

…And I only want the tab to load #awesomeness from the page. How would I go about doing this? I’ve read into some guides that do that by adding a data-target="#youridhere" attribute to the HTML, but I’m still confused on how to implement the javascript. It seems like this is a convenient solution, as I won’t be targeting the same ID in every page. Any clues on how to get the javascript working?

Thanks in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Got the solution 🙂 Using one of the answers as a reference point, the tabs can now load a single element specified in the data-target attribute. Here is the modified version:

    $(function() {
$('#tabs').tabs(
{
beforeLoad: function(event, ui) {
if (ui.panel.children().size() > 0)
    return false;
ui.panel.load($('a', ui.tab).attr('href') + $('a', ui.tab).attr('data-target'));
return false;
}
});
});
    • 0