Categorized | Menu, Tutorial, Wordpress

How To Create Simple Tab Using Css and JavaScript

By using the tabs, you can adjust the content of postings like pages. So readers can more easily understand the contents of the postings.
Other than that which makes tabs should be implemented in your blog or website is that tabs can contain a lot of content with a place that is relatively narrow.

So you have to try it out if your site or blog consists of many materials and media.

I myself often use the tabs to make my web page can load a lot of things and categories so that there are still many empty places in my blog pages that I can use to load the other postings, advertising or anything that I want to put on my blog.

If you want to create tabs using css and javascript code, you can try the following way:

1. Downlod The JavaScript and css code Below :

2. Add the following code into Your Header ( Before /head ) to load the javascript and css code.

<link rel=”stylesheet” href=”<?php bloginfo(‘template_directory’); ?>/tabs.css” type=”text/css” media=”screen”>

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/tabber.js”></script>

3. Add the following code to add tabs into your page or post or bar ,etc.

<div class=”tabber”>

<div class=”tabbertab”>
<h2>Tab 1</h2>
<p>Tab 1 content.</p>
</div>

<div class=”tabbertab”>
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>

<div class=”tabbertab”>
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>

</div>

For Online Demo:

And Below the screenshot:

tabber

Good Luck.

Hopefully Useful

Leave a Reply

*

Our Partner

Our Partner

Update ESET Nod32

Update 11322, 15 Mar 2015

Update 15 Mar 2015

~ For Eset All Version, OS XP, Vista dan Win7