By: Prem Tiwari | Last Updated: | In: Javascript & Ajax, Web Technologies
This is a very basic level implementation. I have created tab style interface using CSS, HTML and Jquery which is working fine. Have a look and follow these steps, to use it and enrich your web applications. It’s easy to understand how to design with CSS we choose it from basics of CSS Navigation and designs that can help you in your projects.
Include below JS and CSS file before head tags in your web page.
1 2 3 4 | <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> |
Complete code
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 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Navigation tabs with css</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script type="text/javascript"> $(function() { $( "#tabs" ).tabs(); }); </script> <style type="text/css"> div #tabs { width:500px; float:left; } </style> </head> <body> <div> <div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> <li><a href="#tabs-3">Tab 3</a></li> </ul> <div id="tabs-1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book </div> <div id="tabs-2"> <ul> <li>Table 1</li> <li>Table 2</li> <li>Table 3</li> </ul> </div> <div id="tabs-3"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. </div> </div> </div> </body> </html> |
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
CSS, download sample css tabs, how to create tabs, Jquery, jquery tabs example
