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> |
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: CSS, download sample css tabs, how to create tabs, Jquery, jquery tabs example
