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.
- To create tabs, you have to create a DIV container that will have a data-role="tabs" attribute.
- Now, do the documentation for Navbar in the DIV container.
- 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.
Example~
<!DOCTYPE html>
<html>
<head>
<title>Tabs - Jquery Mobile | Jaischool</title>
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.css">
</head>
<body>
<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">
<ul>
<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>
</ul>
</div>
<!--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-->
</div>
<!--end tab coding-->
</div>
<div data-role="footer" data-position="fixed"><h2>Footer</h2></div>
</div>
</body>
</html>
Publish A Comment