Tabs Widget

Tabs

The jQuery UI tabs widget is bundled unchanged with jQuery Mobile. Thus, its API documentation fully describes its functionality.

Options and autoinitialization

When used with jQuery Mobile's autoinitialization features, the options documented on the widget's API documentation page can also be provided as data-* attributes in the markup. You can add the data-role="tabs" attribute to your tabs widget markup to indicate that the element is to be turned into a tabs widget.

Ajax considerations

jQuery Mobile provides an extension to the tabs widget (tabs.ajax). The extension provides no new API, however, it modifies the way in which the widget evaluates whether displaying the content referred to by the href attributes of the links that play the role of tabs requires retrieval via Ajax. It is necessary to include this extension if your project consists of multiple external jQuery Mobile pages, one of which features a tabs widget.

Note: Use of links to open popup's and panels is not currently recommended in conjunction with the tabs widget. Clicking these links will remove the active state style of the selected tab.

Example:

A basic example of tabs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>collapsible demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
  <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body>
 
<div data-role="page" id="page1">
  <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" class="ui-btn-active">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>
</body>
 
</html>

Demo: