jQuery Mobile Tabs小部件无效

Question

我想使用jquery mobile创建一个标签小部件。请在下面找到我的代码。但是这个小部件没有按预期工作。请找截图。

<div data-role="page" id="tabs">
      <div data-role="header">
        <h1>jQuery Mobile Example</h1>
      </div>
      <div role="main" class="ui-content">
        <div data-role="tabs">
          <div data-role="navbar">
            <ul>
              <li><a href="#fragment-1">One</a></li>
              <li><a href="#fragment-2">Two</a></li>
              <li><a href="#fragment-3">Three</a></li>
            </ul>
          </div>
          <div id="fragment-1">
            <p>This is the content of the tab 'One', with the id fragment-1.</p>
          </div>
          <div id="fragment-2">
            <p>This is the content of the tab 'Two', with the id fragment-2.</p>
          </div>
          <div id="fragment-3">
            <p>This is the content of the tab 'Three', with the id fragment-3.</p>
          </div>
        </div>
      </div>
    </div>