create switching tabs step by step using CSS and jQuery

When you see a switching tab on the web at the first time, you must be attracted by its amazing design. You click a tab header(title), it shows you the corresponding tab content below while other tab contents are hidden. All the tab titles are always displayed for you to select, but only one (chosen) tab content is displayed at one time. The tabs is used to contain multiple sets of content on one page,  but display one set each time. Today, you will learn how to create tabs step by step using jQuery and CSS.

Tabs use two divs at the top level, one for the tab headers(titles), the other for the tab content.

<html>
<head>
<title>test</title>

</head>
<body>
<div class="tabheader">
  <ul>
    <li><a href="">tab1</a></li>
    <li><a href="">tab2</a></li>
    <li><a href="">tab3</a></li>
  </ul>
</div>
<div class="tabcontent">
  <ul>
    <li>tab1 content</li>
  </ul>
  <ul>
    <li>tab2 content</li>
  </ul>	
  <ul>
    <li>tab3 content</li>
  </ul>
</div>
</body>
</html>

The above code is far from forming tabs. All headers and content are displayed at present, and the headers are displayed from top to bottom. The first step is to arrange the headers from left to right and get rid of the decorative dots in front of lis, which can be accomplished by CSS.

<html>
<head>
<title>test</title>
<style>
.tabheader li
{
  float:left;
  list-style:none;
}
.hide
{
    display:none;
}
</style>
</head>
<body>
<div class="tabheader">
  <ul>
    <li><a href="">tab1</a></li>
    <li><a href="">tab2</a></li>
    <li><a href="">tab3</a></li>
  </ul>
</div>
<div class="tabcontent" style="clear:left">
  <ul>
    <li>tab1 content</li>
  </ul>
  <ul class="hide">
    <li>tab2 content</li>
  </ul>	
  <ul class="hide">
    <li>tab3 content</li>
  </ul>
</div>
</body>
</html>

Note that we use “float:left;” for the Lis so the tab titles are displayed from left to top. Note also that we  add an extra CSS style: style=”clear:left” to the content div to avoid the tab content below from wrapping around the tab titles(see this post for the detailed information of “float:left” and “clear:left”). We also use the “hide” class for the second and the third tab content so only the first tab content is shown at present.  The next task is to show the individual tab content when mouse moves over the corresponding tab header. We accomplish this task using jQuery.

<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript">
   $(document).ready(
       function () 
       {
            $(".tabheader").each(
                function()
                {
                    var header = $(this);
                    header.find("ul li").mouseover(
                        function()
                        {
                            $(this).find("a").addClass('focus').closest("li").siblings().find("a").removeClass('focus');
                            header.next(".tabcontent").find("ul").eq($(this).index()).show().siblings().hide();
                        }
                    )
                }
            )
       }
   );
</script>
<style>
.tabheader li
{
    float:left;
    list-style:none;
}
a.focus {
    border-bottom: 1px #000000 solid;
    color: #FF0000;
    background: #000000;
}
.hide
{
    display:none;
}

</style>
</head>
<body>
<div class="tabheader">
    <ul>
        <li><a href="javascript:void">tab1</a></li>
        <li><a href="javascript:void">tab2</a></li>
        <li><a href="javascript:void">tab3</a></li>
    </ul>
</div>
<div class="tabcontent" style="clear:left">
    <ul>
        <li>tab1 content</li>
    </ul>
    <ul class="hide">
        <li>tab2 content</li>
    </ul>    
    <ul class="hide">
        <li>tab3 content</li>
    </ul>
</div>
</body>
</html>

Now, when you move mouse on a tab header, the header becomes black and the corresponding tab content is displayed below. It is time to review basics of jQuery. $(document).ready() function takes a anonymous function as its parameter. The result is the anonymous function will be executed after the document is loaded. When the anonymous function is executed, it finds all the elements with the class “tabheader”(in our case, there is only one such element), on which another anonymous function(as the parameter of the jQuery each function) is called. The function first stores $this(representing the tabheader element) to the variable “header”. Then it finds all the li elements(i.e., the tab headers) and binds their mouseover events to the third anonymous function. The third anonymous function is called whenever the mouse hovers over a tab header. It finds the anchor element in the current header(represented by $this in this function), and adds the class “focus” to it to show prominently. Meantime the “focus” class of all other tab titles is removed. It also finds the next element to the “tabheader” div, which, in our case, is the “tabcontent” div. After finding the “tabcontent” div, it shows the ul element under that div, which has the same position as current tabheader(relative to the first tabheader) and hides all other uls, which implements the tabbed content. You need to be familiar with the following jQuery functions:

The jQuery next function can not be read as “the next matched element to the current element”, but as “the immediately following AND also matched element”. If the immediately following element does not match what is specified in the selector as the parameter of the next function, the returned jQuery object does not contain any element.

The jQuery eq function is not a logical function that returns true or false, but used to exclude DOM elements  whose index is not that specified as the parameter. In other words, after calling the eq function, the jQuery object only contains the element at the specified position(if any).

The jQuery index function returns the position of the current element(or the first element in a collection) relative to its first sibling.

For newbies not familiar with javascript, you may be confused by the usage of the variable “header”. The “header” variable gets its value at the end of document loading and represents the “tabheader” div. Then the second anonymous function finishes and returns. The variable seems to end its life now. But later, when mouseover event occurs, the third anonymous function is called and the “header” variable is used again. Are we using an undefined variable or a variable with random  content? Not actually! The third anonymous is created during the execution of the second anonymous function. During its creation time, it stores a copy of the Variable Object of its parent function(the second anonymous function) and copies of Variable Objects of all ancestors, as its Scope property. In other words, the VO in the execution context (corresponding to the second anonymous function) on the top of the execution context stack and all VOs in other execution contexts in the execution context stack are copied to the Scope property of the third anonymous function(forming a scope chain) during its creation time. When the second anonymous function returns, although its execution context is popped up from the execution context stack, the memory used by its VO is not reclaimed(note that the memory of the VO is not allocated in the execution context, the execution context only contains the reference to the VO) because there are other references(in the Scope property of the third anonymous function) to the VO. When the third anonymous function is about to execute(but before the actual execution of its code), its own VO is constructed(containing the function parameters, defined functions, and defined variables) and put in front of the scope chain in the Scope property. So when the third anonymous function is actually executed, it can access the variable “header” which was created/updated by the second anonymous function.

Comments are closed, but trackbacks and pingbacks are open.