Tabs is used for utilizing space and keep some stylish effects on website. jQuery tabs are very popular and it created some fancy look on web pages. I created a simple in use but a fancy looking jquery and css based tabs to give you and example. I used css to make it in some rounded style. Its doesnt work for IE but its fine in Firefox and Chrome. I hope you will like this stylish and sexy tabs tutorial. Fee free to subscribe by email (no spams will be sent). Cheers !
Download all files to get this gallery.
JQuery Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$(document).ready(function(){ $("#first-tab").addClass('buttonHover'); }); function navigate_tabs(container, tab) { $(".b").css('display' , 'none'); $(".c").css('display' , 'none'); $(".a").css('display' , 'none'); $("#first-tab").removeClass('buttonHover'); $("#second-tab").removeClass('buttonHover'); $("#third-tab").removeClass('buttonHover'); $("#"+tab).addClass('buttonHover'); $("."+container).show('slow'); } |
CSS
|
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 |
body{ /* Setting default text color, background and a font stack */ font-size:13px; background: #fff; font-family:Arial, Helvetica, sans-serif; } .b, .c{ display:none;} #body em{ font-style:normal; font-size:36px;} .buttons{ border-bottom:solid #d1c8b8 4px; display:block; padding:8px; width:80px;-moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; text-align:center; margin:1px; background:#4b7975; text-decoration:none; color:#FFFFFF; float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px } .buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;} a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;} #body { background:#919b9d; text-align:justify; overflow:hidden; color:#fff; padding:20px; -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em; height:200px; width:272px; } #wrap{ text-align:left; overflow:hidden; width:350px; height:380px; } |
Download all files and use this awesome and fancy script.
Comments are closed.