Tabs in Jquery Mobile

Date Published: 14/05/2020 Published By: JaiSchool

The tab is a way to display content from different sections of a page. We have to create documentation for every page in a single page application for menus (on a single webpage). The same code to use multiple times on a single webpage is not good for the perspective of SEO.

The better method can be tabs for SPA (single page applications) menus.

If you don' t know how to create menus in Jquery mobile. Then first learn to create menus because Major documentation will be similar to nav.

  1. To create tabs, you have to create a DIV container that will have a data-role="tabs" attribute.
  2. Now, do the documentation for Navbar in the DIV container.
  3. The content that will be displayed after clicking a specific tab, write those content just before closing DIV (having data-role="tabs") tag in a DIV tag and give an id to link in an anchor.

Use class="ui-btn-active" to show a tab active.


<!DOCTYPE html>
  <title>Tabs - Jquery Mobile | Jaischool</title>
  <script src = ""></script>
  <script src=""></script>
  <link rel="stylesheet" href="">

  <div data-role="page" id="home">
    <div data-role="header" data-position="fixed"><h1>Jaischool</h1></div>
    <div data-role="main" class="ui-content">
    <!--start tab coding-->

    <div data-role="tabs">
      <!--start navbar coding-->
      <div data-role="navbar" data-grid="b">
          <li><a href="#home" class="ui-btn-active">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#about">Contact</a></li>
      <!--end navbar coding-->
      <!--start coding for home page-->
        <div id="home"><p>This is homepage.</p></div><!--end-->
      <!--start coding for home page-->
        <div id="services"><p>This is services page.</p></div><!--end-->

        <!--start coding for home page-->
        <div id="about"><p>This is about us page.</p></div><!--end-->

    <!--end tab coding-->

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


Publish A Comment

Leave a Reply

Your email address will not be published. Required fields are marked *