-p- Tabs on the top, bottom, left, right of content box - a CSS and javascript solution

Tabs on different locations - a CSS and Javascript solution

We have discussed 2 basic techniques to make pure CSS tabs. If using javacript we will get better enhancement for the tabs. This page uses <li> + block <a> technique plus javacript script easily customerizing the the tabs you need. With only one line of script, you could set,

Let's take a look at how to achieve these.

Tabs on the top side of content box

javascript

To customerize the tabs on the right needs just one line of javascript.

Bindtabs("tabco1",3,"mouseover","t"); in which

  • tabco1 - is the container id of the tabs
  • 3 - sets the 4th tab is the initial active tab
  • mouseover - sets the tabs changing event
  • t - means the location of the tabs is on the top
HTML
<div id="tabco1">
    <ul>
        <li><a>tab 1</a></li>
        <li><a>tab 2</a></li>
        <li><a>tab 3</a></li>
        <li><a>tab 4</a></li>    
    </ul>
    <div>content tab1</div>
    <div >content tab2</div>
    <div>content tab3</div>
    <div >content tab4</div>
</div>
live tab

content tab1
content tab2
content tab3
content tab4

Tabs on the bottom side of content box

javascript

To customerize the tabs on the right needs just one line of javascript.

Bindtabs("tabco2",2,"click","b"); in which

  • tabco2 - is the container id of the tabs
  • 2 - sets the 3rd tab is the initial active tab
  • click - sets the tabs changing event
  • b - means the location of the tabs is on the bottom
HTML
<div id="tabco2">
    <div>content tab1</div>
    <div >content tab2</div>
    <div>content tab3</div>
    <div >content tab4</div>
    <ul>
        <li><a>tab 1</a></li>
        <li><a>tab 2</a></li>
        <li><a>tab 3</a></li>
        <li><a>tab 4</a></li>    
    </ul>    
</div>
live tab

content tab1
content tab2
content tab3
content tab4

Tabs on the left side of content box

javascript

To customerize the tabs on the right needs just one line of javascript.

Bindtabs("tabco3",0,"mouseover","l"); in which

  • tabco3 - is the container id of the tabs
  • 0 - sets the 1st tab is the initial active tab
  • mouseover - sets the tabs changing event
  • l - means the location of the tabs is on the left
HTML
<div id="tabco3">
    <ul>
        <li><a>tab 1</a></li>
        <li><a>tab 2</a></li>
        <li><a>tab 3</a></li>
        <li><a>tab 4</a></li>    
    </ul>
    <div>content tab1</div>
    <div >content tab2</div>
    <div>content tab3</div>
    <div >content tab4</div>
</div>
live tab

content tab1
content tab2
content tab3
content tab4

Tabs on the right side of content box

javascript

To customerize the tabs on the right needs just one line of javascript.

Bindtabs("tabco4",2,"click","b"); in which

  • tabco4 - is the container id of the tabs
  • 2 - sets the 3rd tab is the initial active tab
  • click - sets the tabs changing event
  • b - means the location of the tabs is on the bottom
HTML
<div id="tabco4">
    <div>content tab1</div>
    <div >content tab2</div>
    <div>content tab3</div>
    <div >content tab4</div>
    <ul>
        <li><a>tab 1</a></li>
        <li><a>tab 2</a></li>
        <li><a>tab 3</a></li>
        <li><a>tab 4</a></li>    
    </ul>    
</div>
live tab

content tab1
content tab2
content tab3
content tab4

What else we need to make these tabs? Yes, CSS code and javascript. This will be our next topic - content tabs script generator.

Social Bookmark if the page is useful.



The layout of this page was generated by one column layout generator and three column layout generator.
Last updated at Oct.21, 2008