LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » JavaScript Colourful Multi Tab With Active Tab Widget

JavaScript Colourful Multi Tab With Active Tab Widget

JavaScript-Colourful-Multi-Tab-With-Active-Tab-Widget
Web Designing is trending now a days so many people are trying to make their own web or blogs in awesome because web designing effect SEO too as to decrease loading time, increasing CTR and a lot of other restaurant of SEO depends upon your Web Designing so you should have a view on your Wev Design too. Their are so many snippets, widgets and codes depends upon your Web Designing and one from them is Multi Tab Widget.

Multi Tab Widget is a most important widget in Web Designing to show your more contecnt in less place on user demand so you can show more and more data on your little size Web Page using Multi Tab Widget. Their are many Multi Tab Widget available over internet but some of them are using JQuery, Some are using CSS3 and some have JavaScript but too heavy so you have to use Multi Tab Widget but in less size to save your SEO too. So here we have a little size less coded Multi Tab Widget that is cross browser too.

Features:

1.) Pure JavaScript Added.
2.) No Extra Code File Required.
3.) CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.
6.) Different Color On Active Tab
7.) Stylish And Awesome In Design.
8.) Little And Short Code.
9.) Can Work Inside Post.
10.) Can All More Tabs.

Recommended For You:
How To Add Simple Floating DIV Using J-Query In Blog/Site

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style>
 #sel1{background:#2299DD}
 #sel2{background:#232323}
 #sel3{background:#232323}
 #sel1, #sel2, #sel3{cursor:pointer;border-bottom:5px solid #2299DD;color:#FFFFFF;float:left;width:33.33%;text-align:center;padding:12px 0;font-family:sans-serif;font-weight:bold;}
 #resultsel1, #resultsel2, #resultsel3{display:block;clear:both;width:100%;background:#F7F7F7;font-size:16px;font-family:sans-serif;padding:10px;}
 #resultsel1{display:block;}
 #resultsel2{display:none;}
 #resultsel3{display:none;}
 </style>

JavaScript:

 <script type="text/javascript">
 var selected="sel1";
 var disp="resultsel1";
 function show(a,b) {
 document.getElementById(selected).style.backgroundColor = "#232323";
 document.getElementById(disp).style.display = "none";
 document.getElementById(a).style.backgroundColor = "#2299DD";
 document.getElementById(b).style.display = "block";
 selected=a;
 disp=b;
 }
 </script>

HTML:

 <div width="100%">
 <span id='sel1' onclick="show('sel1','resultsel1');">Tab 1</span>
 <span id='sel2' onclick="show('sel2','resultsel2');">Tab 1</span>
 <span id='sel3' onclick="show('sel3','resultsel3');">Tab 1</span>
 <div id="resultsel1">Your Unlimited Data For Tab 1 That Will Be Visible On Load And Upper "Tab 1" Button Will Be Active.</div>
 <div id="resultsel2">Your Unlimited Data For Tab 2 That Will Be Visible On CLick And Upper "Tab 2" Button Will Be Active.</div>
 <div id="resultsel3">Your Unlimited Data For Tab 3 That Will Be Visible On CLick And Upper "Tab 3" Button Will Be Active.</div>
 </div>

Customization:

1.) Edit Your HTML As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…

Recommended For You:
Add Check/Uncheck All Checkbox Input Button Using Pure JavaScript

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

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