This website uses cookies to personalise ads and to analyse traffic ok
web design

HTML Tabs: Complete tutorial and plugin

How to use the plugin

Download the archive which contains all plugin and tutorial files. Extract the plugin folder and upload jquery.m.tabs.js (or its minified version: jquery.m.tabs.min.js), jquery.m.tabs.css and ajax-loader.gif to your web server.

Include jquery.m.tabs.css inside the head tag your html document

<link href="jquery.m.tabs.css" rel="stylesheet" type="text/css" />

Create your tabs markup

<div class="tabs">
  <ul>
    <li class="active-tab">
      <a href="#">First tab title</a>
    </li>
    <li>
      <a href="#">Second tab title</a>
    </li>
    <li>
      <a href="#">Third tab title</a>
    </li>
    <li>
      <a href="#">Fourth tab title</a>
    </li>
  </ul>
  <div>
    <div>
      <p>first tab content</p>
    </div>
    <div id="tab-2">
      <p>Second tab content</p>
    </div>
    <div id="tab-3">
      <p>Third tab content</p>
    </div>
    <div id="tab-4">
      <p>Fourth tab content</p>
    </div>
  </div>
</div>

Include the jQuery library (via Google’s CDN) and jquery.m.tabs.js inside the head tag or at the very bottom of your document, before the closing body tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.m.tabs.js"></script>

Call Tabs function on the .tabs element. You can place the following code either in the head or body tag (depending on which tag you included the plugin file)

<script>
    (function($){
        $(document).ready(function(){
            $(".tabs").Tabs("fast");
        });
    })(jQuery);
</script>  

You can change the function call selector (".tabs") to anything you want (an id, class name, js variable etc.) – see CSS selectors. Additionally, you may insert multiple selectors by inserting comma separated values. For example:

<script>
    (function($){
        $(document).ready(function(){
            $("#tabs-1,#tabs-2").Tabs("fast");
        });
    })(jQuery);
</script>  

The speed parameter value (“fast”) sets the fade-in/out and height animations speed when switching between tabs. Its value can be “fast”, “slow” or an integer (e.g. 700) for milliseconds. If you don’t pass any parameter value, the speed defaults to zero which makes tabs switching instantaneous.

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
http://opensource.org/licenses/MIT

Pages: 1 2


10 Comments

Post a comment
  1. Pico
    Posted on March 28, 2014 at 02:38 Permalink

    marvelous. so happy you’re around1

    Reply
  2. Chad
    Posted on November 9, 2013 at 22:10 Permalink

    Thank you for the fantastic scripts!

    Any chance you might have an example of this working along with your custom horizontal scrollbar? I really need a flexible width tabbed display that works with a horizontal scrollbar.

    I’ve been trying to implement a series of Jquery-UI tabs along with your scrollbar and I haven’t been having much luck.

    Reply
  3. Brian
    Posted on September 12, 2013 at 16:41 Permalink

    Hi

    I’m new at all this fancy code, so maybe someone could help.

    I have used (http://manos.malihu.gr/tuts/tabs/tutorial/step-8.html) and it’s pretty nice. I have tryed to combine it with the scrollbar (http://manos.malihu.gr/tuts/custom-scrollbar-plugin/infinite_scroll_example.html) without any luck. Can these work together?

    /Brian

    Reply
  4. Nikita Radaev
    Posted on June 18, 2013 at 22:19 Permalink

    Hi Malihu,

    Just wanted to thank you for you excellent tutorials. I’ve used your plugins in most of my projects. Not to say how much I learned from them. Again, thank you and keep up good work.

    Cheers, Nikita!

    Reply
  5. Mareno
    Posted on December 3, 2012 at 02:05 Permalink

    very useful. excellent tutorial

    How do I get this tab to show content in two different places.

    for example, the right and left in two boxes

    One box text, the second picture.

    thanks in advance
    sry bd eng

    Reply
    • Ana Leonne
      Posted on September 3, 2015 at 11:56 Permalink

      I also plan to implement HTML tab menu in sidebar on the web pages.

      My only problem for now is how to keep page 100% responsive as it is now and is it complicated to implement that?
      You can find my page is here

      Reply
  6. John Inglessis
    Posted on October 20, 2012 at 22:35 Permalink

    Dictionary Word : explanation
    Definition: go and read malihu’s tutorials.
    Nice work ! !

    Reply
  7. Peter
    Posted on October 20, 2012 at 03:50 Permalink

    Nice work. This is my first time seeing someone create a tabbed piece that supports ajax by default. It’s nice and clean, good work! Then again, you always do good work! ๐Ÿ™‚

    Reply
  8. Yoosuf
    Posted on October 4, 2012 at 17:36 Permalink

    Oh hell no, i will use the jQuery UI

    Reply
    • malihu
      Posted on October 4, 2012 at 18:31 Permalink

      Yes, of course you could do that.

      In addition to just using the plugin itself on your project(s), the tutorial serves the purpose of learning how to do it yourself and understanding how tabs actually work.

      Moreover, someone might not want to utilize the jQuery ui just for few simple tabbed areas. The plugin provided here is 1.5kb and can handle static as well as ajax content.

      Reply

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php