Question

是否可以将jquery-ui tab-pane的内容作为另一个html文档？

         <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>

我认为我的页面设置如此处的文档：http://jqueryui.com/demos/tabs/#Ajax_mode

$(document).ready(function()
{

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



});

但我的页面没有显示。在调试器中，我看到外部文档确实已加载（并且选项卡中有一条loading ...消息），但内容未被呈现。是否需要额外的javascripting才能呈现外部页面？

Answer 1

似乎没问题，除了第二个和第三个li元素中的标记错误：你关闭了一个未打开的span标记......

     <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>

Answer 2

编辑：更新的工作代码。以前有一些错字。

<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>

对于新的html文档，您需要在iframe中加载它们。您甚至可以使用if并更改一帧的来源（但这样您可以看到前一帧中的更改是切换标签）

编辑：

在jsfiddle

上添加了代码

带有ajax内容的jquery ui标签：未呈现的内容

2 个答案: