CODEWITHSUNDEEP
jqueryhtml
lapots
lapots

Reputation: 13395

load in tab panel part of other page

I use jquery ui tabs. And I want to show part of other page(page.html and it's in the same folder) in panel for certain tab. Here is 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>

And here is the page with tabs

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

But the panel for elem1 is always clear. Where is the problem?

Upvotes: 0

Views: 171

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

If it's in the same folder as the script you are running, the path should not have a / at the beginning. /page.html will look in your server root for page.html.

Upvotes: 1

Related Questions