Home/ Questions/Q 6336677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T19:06:13+00:00

Is it possible to have the content for a jquery-ui tab-pane be another html

  • 0

Is it possible to have the content for a jquery-ui tab-pane be another html document?

         <div id='tabs' class="ui-tabs">

             <ul>

    <li><a href="Text.html" ><span>Text</span>/a></li>
    <li><a href="Notes.html" ><span>Notes</span></a></li>
    <li><a href="Glossary.html" >Glossary</span></a></li>

              </ul>

        </div>

I think my page is set up as in the documentation here: http://jqueryui.com/demos/tabs/#Ajax_mode

$(document).ready(function()
{

   $("#tabs").tabs();



});

but my pages do not display. In the debugger I see that the external document has indeed been loaded (and there is a loading… message in the tab briefly) but the content is not being rendered. Is there additional javascripting required to get the external pages to be rendered?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    EDIT: updated working code. Previous had some typo’s.

    <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
    var tabContainers = $('div#bodyTabs div');
    tabContainers.hide().filter(':first').show();
    $('div#tabs ul a').click(function ()
    {
        if(this.hash == '#tab2')
        {
                // do something different for tab2
            }else
            {
            tabContainers.hide();
            tabContainers.filter(this.hash).show();
            $('div#tabs ul li').removeClass('selected');
            $(this).parent().addClass('selected');
            }                                                           
            return false;
    });
}).filter(':first').click();
window.getSelection().removeAllRanges();
</script>
</body>
<html>
<div id='tabs' class="ui-tabs">
    <ul>
        <li><a href="#tab1" ><span>Text</span></a></li>
        <li><a href="#tab2" ><span>Notes</span></a></li>
        <li><a href="#tab3" ><span>Glossary</span></a></li>
    </ul>
</div>
<div id="bodyTabs">
    <div id="tab1" style="display:none;">
        <iframe src="Text.html"></iframe>
    </div>
    <div id="tab2" style="display:none;">
        <iframe src="Notes.html"></iframe>
    </div>
    <div id="tab3" style="display:none;">
        <iframe src="Glossary.html"></iframe>
    </div>
</div>
</body>
</html>

    For new html document you need to load them in an iframe. You can even use if’s and change the source of just one frame (but this way you can see changes in previous frame is you switch tabs)

    EDIT:

    Added code on jsfiddle

    • 0