Jquery Mobile tabs in page content

Question

I am searching a plugin in jQuery mobile for tab implementation. tabs must be in content of the page. This is wat I have...

<div data-role="page" id="nav">
  <div data-role="page" id="nav">
    <div data-role="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">

        <div data-role="navbar" data-iconpos="top">

            <ul>
                <li>
                    <a href="#one" data-theme="" data-icon="" class="ui-btn-active ui-state-persist">
                        Button
                    </a>
                    </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
            </ul>
        </div>
        <div data-role="page" id="one" data-transition="slide">
            <div data-role="content" style="background-color:#ff0;">    
                <h1>One</h1>
            </div>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <h3>
            Footer
        </h3>
    </div>
</div>

When i click on page id "one". it is not displaying its respective content. Can anyone pls help me.

Answer 1

Or you can use my tabview plugin. Based on JQM collapsbile set, you just need to replace JQMs collapsible and collapsible set widget with my versions. Old collapsibles will continue working as normal. When you add data-type="horizontal" to a collapsible set, it becomes ... tabs...

Demo here, Repo on Github.

I like the other solution, too.

Answer 2

I modified jQuery.mobile-tabs to allow the tab bar to be placed anywhere within the page. Is this what you had in mind?