jquery ui tabs with ajax content: content not rendered_问答_开发者

jquery ui tabs with ajax content: content not rendered

开发者 https://www.devze.com 2023-03-29 09:31 出处：网络

Is it possible to have the content for a jquery-ui tab-pane be another html document? <div id=\'tabs\' class=\"ui-tabs\">

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 externa开发者_高级运维l pages to be rendered?

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

It seems ok, except from a markup error in the second and third li element: you close a span tag which was not opened...

     <div id='tabs' class="ui-tabs">
         <ul>
          <li><a href="Text.html" ><span>Text</span>/a></li>
          <li><a href="Notes.html" >Notes**</span>**</a></li>
          <li><a href="Glossary.html" >Glossary**</span>**</a></li>
         </ul>
    </div>