Question

我使用jquery ui标签。我想在某个选项卡的面板中显示其他页面的一部分（page.html并且它位于同一文件夹中）。这是page.html

<html>
<head>
<head>
<body>
    <div id="content1">
        <p>Page.html content 1</p>
    </div>
    <div id="content2">
        <p>Page.html content 2</p>
    </div>
</body>
</html>

这是带标签的页面

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="jquery-ui-themes-1.10.3/themes/black-tie/jquery-ui.css" />
    <script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
    <script>
        $(function() {
            $( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
            $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
            $( "#tabs" ).tabs({
                event: "mouseover"
            });
        });
    </script>
    <style>
        .ui-tabs-vertical { width: 55em; }
        .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
        .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
        .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
        .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
        .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
    </style>
</head>
<body>
    <div id="tabs">
        <ul>
            <li>
                <a href="/page.html#content1">Elem 1</a>
            </li>
            <li>
                <a href="#">Elem 2</a>
            </li>
            <li>
                <a href="#">Elem 3</a>
            </li>
        </ul>
    </div>
</body>
</html>

但是elem1的面板总是清晰的。问题在哪里？

Answer 1

如果它与您正在运行的脚本位于同一文件夹中，则路径的开头不应为/。 /page.html将在您的服务器根目录中查找page.html。

在其他页面的选项卡面板中加载

1 个答案: