1. HTML kood (see pane kas HTML lehele, widgetisse või mujale, kuhu seda tabivalikut teha tahad)

Kood:

<!-- start the tabs wrapper (not necessery, but good to have) -->
<div id="tabs_wrapper">
    <!--  the tab links  -->
    <a class="tab_link tab_link_selected" title="#popular" href="popular.html">Popular</a>
    <a class="tab_link" title="#recent" href="recent.html">Recent</a>
    <a class="tab_link" title="#new" href="new.html">New</a>
    <!--  end tab links  -->

    <!--  clear it  -->

    <!-- start tab text containers  -->
<div id="popular" class="tab_text active_tab">
        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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="recent" class="tab_text">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>
<div id="new" class="tab_text">
        That's it. Quite easy isn't it.</div>
<!--  end tab text containers  --></div>
<!-- end the tabs wrapper -->

Tulemus:


2. CSS (ACP -> Display -> Colors -> CSS Stylesheet)

Kood:

    .tab_link {
    float:left; /* important */
    /* just styling */
    border:1px solid black;
    background: #135484;
    padding:5px;
    margin-right:10px ;
    color:white;
    text-decoration:none;
    font-variant:small-caps;
    }
    .tab_link_selected{ background-color: #65899E; } /* just a different tab link bg color when it's selected */
    .tab_text {
    display: none; /* hide the text containers */
    /* just styling */
    border:1px solid black;
    padding:5px;
    color:black;
    }
    .clear {clear: both;}  /* when we use css float property, we need to clear after the last floated item */

Tulemus:


3. jQuery (ACP -> Modules -> Javascript codes management -> Create a new javascript)
Linnuke pane vastavalt sellele, kus sul tabid ilmuvad. Kui täpselt ei tea, pane In all the pages.

Kood:

        $(document).ready(function(){
        /*Since all the tabs are hidden with css we are displaying the tab with class .active_tab using fadeIn()
        function. If you just want it to show with no effect, just put show() instead of fadeIn() */
        $('.active_tab').fadeIn();

        //when a tab link is clicked...
        $('.tab_link').live('click', function(event){

            /*...prevent the default behaviour...*/
            event.preventDefault();

            /* ...remove the tab_link_selected class from current active link... */
            $('.tab_link_selected').removeClass('tab_link_selected');

            /* ...and add it to the new active link */
            $(this).addClass('tab_link_selected');

            /*...get the title attribute (which corensponds to the id of the needed text container),
            but you can use any attribute you want*/
            var container_id = $(this).attr('title');

            //...animate the current active_tab by changing it's height and opacity ...'
            $('.active_tab').animate({

                height : 'toggle' , opacity : 'toggle'

            //...and when that animation ends...
            },function(){

                //...remove the active_tab class from the current active tab...
                $(this).removeClass('active_tab');

                //...and add that class to the tab that corensponds the clicked link...
                $(container_id).addClass('active_tab');

                //...and animate the new active_tab by using toggle on height and opacity again...
                $('.active_tab').animate({

                    height : 'toggle' , opacity : 'toggle'

                });
            });

        });
    });

Korras!

DEMO näeb SIIT!