We will learn how to manipulate the dom to create a tabs each with content , and when clicked on the each of the tabs , the respective content shows

Objective: We have four tabs each with content , and when each tabs gets selected the respective content shows.

Code:

<!DOCTYPE html>
<html>
	<head>
		<script src="mootools-core-1.4.5-full-compat.js"></script>
		<script>
					window.addEvent('domready', function(){
                       var  currentSelectedPage=1;
                        $$('ul.tabination li').addEvent('click',function(e){
                            toggle('page-'+this.get('id').split('-')[1]);
                            })
                      toggle=  function(id){
                            if(id!=currentSelectedPage){
                                $$('div.pageblock').each(function(e){
                                    var curlnk='jcnk-'+e.get('id').split('-')[1]
                                    if(e.get('id')==id){
                                        currentSelectedPage=e.get('id');
                                        e.setStyle('display','block');
                                        $(curlnk).toggleClass('lnkselected');
                                    }else{
                                        $(curlnk).removeClass('lnkselected');
                                        e.setStyle('display','none');}
                                });
                            }
                        }
				});
			</script>
        <style>
            ul.tabination {
                height: 20px;
                margin: 12px 12px 9px 25px;
                padding: 0;
            }
            ul.tabination li {
                background-color: buttonface;
                border: 1px solid #CFCFCF;
                clear: right;
                cursor: pointer;
                float: left;
                list-style: none outside none;
                margin-right: 8px;
                text-align: center;
                width: 45px;
            }
            .lnkselected {
                background-color: #0088CC !important;
                color: #FFFFFF !important;
                cursor: default !important;
            }
        </style>
	</head>
	<body>


    <ul class="tabination">
        <li id="jcnk-1" class="lnkselected">Tab 1</li>
        <li id="jcnk-2">Tab 2</li>
        <li id="jcnk-3">Tab 3</li>
        <li id="jcnk-4">Tab 4</li>
    </ul>
    <div  id="page-1" class="pageblock">
        <p>This is page 1</p>
       <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa mi, feugiat ut leo porta, vehicula egestas dolor. Nunc et interdum eros, vitae vehicula turpis. Sed eu sem eu lectus mattis tincidunt sed eget velit. Quisque lectus neque, feugiat ut mi non, ultrices consequat enim. Proin eleifend enim quis eros rutrum iaculis. Maecenas in fermentum quam. Nullam fermentum ipsum laoreet posuere scelerisque. Duis euismod nunc posuere augue fringilla, non mollis diam tincidunt. Fusce tristique volutpat hendrerit. Phasellus est ipsum, placerat at odio eget, mollis consectetur ipsum. Nullam ac eros eu augue fermentum ultricies. Suspendisse id nisi nibh. Morbi massa magna, fringilla vitae est nec, tristique iaculis velit. Sed hendrerit nisi hendrerit mi convallis, ac tristique velit scelerisque</p>

    </div>
    <div style="display:none" id="page-2" class="pageblock">
        <p>This is page 2</p>
        <p> Aliquam at suscipit augue. Maecenas mollis condimentum magna, et accumsan est commodo semper. Maecenas non libero justo. Aliquam quam turpis, imperdiet at sodales quis, placerat in sapien. Suspendisse vitae gravida nisi. Etiam ut libero massa. Maecenas eget mi posuere velit fringilla dictum. Mauris eu mi pulvinar, commodo urna id, scelerisque ante. Phasellus mauris libero, fringilla id pretium vel, congue quis lacus. Suspendisse ac pretium justo. Sed vel turpis adipiscing, consectetur sem a, varius augue. Vestibulum vulputate nisl nec nulla mollis pharetra in vitae tellus. Phasellus ante neque, tincidunt dictum urna nec, sodales ornare urna. Cras vitae elit vestibulum, suscipit mi id, gravida dolor.</p>

    </div>
    <div style="display:none" id="page-3" class="pageblock">
        <p>This is page 3</p>
        <p> Nullam ornare ornare ligula, id lobortis lorem vulputate et. Nunc ut lobortis nisl, non sagittis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam posuere bibendum tellus non auctor. Etiam nibh ipsum, rutrum at dui eget, vehicula condimentum justo. Vestibulum pharetra volutpat tortor, rhoncus molestie massa suscipit at. Maecenas odio tellus, feugiat ac lorem ut, pretium aliquam massa.</p>

    </div>
    <div style="display:none" id="page-4" class="pageblock">
        <p>This is page 4</p>
        <p> Praesent in arcu metus. Cras blandit ipsum sapien, quis tincidunt tortor elementum congue. Cras eu gravida nulla, et volutpat est. Fusce hendrerit lacus ut feugiat ullamcorper. Fusce sed elementum quam. Fusce nec leo vel orci semper gravida. Etiam id metus interdum, fringilla nulla vel, commodo elit. In vestibulum augue lorem, non tristique metus ultrices quis. Donec laoreet ut augue in suscipit. Vivamus elementum, nunc vel malesuada lacinia, nulla dolor facilisis risus, non accumsan dolor dui et felis. Praesent et posuere magna. Sed at sagittis felis, quis facilisis orci. Praesent sodales arcu magna, ut consequat tortor condimentum at. Quisque suscipit ac elit a molestie. Pellentesque luctus sapien ornare urna facilisis porta.</p>


    </div>
	</body>
</html>

Explanation:  We have four ul li each representing the tabs , and each of these follows a pattern in the naming of their ids. For example jcnk-1,jcnk-2.. , and we have four div blocks each has the content that belongs to the tabs. Also the div has the id pattern as page-1 ,page-2.... Now as you have already noticed , each div also is decorated with a class "pageblock" , and all the divs are styled to display none ,except the first one.  At line 8 we have attached the click event to the tabs. And when the click occures we call the toggle function, defined  at line 11. The toggle function, which takes a string , the id of the li tag. The function then , checks and finally display set to block of the tab content and set others as display none, at the same time it also applies the lnkselected class to the li to make it current highlighted tab.

Demo:

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 4

This is page 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa mi, feugiat ut leo porta, vehicula egestas dolor. Nunc et interdum eros, vitae vehicula turpis. Sed eu sem eu lectus mattis tincidunt sed eget velit. Quisque lectus neque, feugiat ut mi non, ultrices consequat enim. Proin eleifend enim quis eros rutrum iaculis. Maecenas in fermentum quam. Nullam fermentum ipsum laoreet posuere scelerisque. Duis euismod nunc posuere augue fringilla, non mollis diam tincidunt. Fusce tristique volutpat hendrerit. Phasellus est ipsum, placerat at odio eget, mollis consectetur ipsum. Nullam ac eros eu augue fermentum ultricies. Suspendisse id nisi nibh. Morbi massa magna, fringilla vitae est nec, tristique iaculis velit. Sed hendrerit nisi hendrerit mi convallis, ac tristique velit scelerisque