simple tabs with java script + css tabs

java script used:

1.  call a funcition on click
2.  find elements with specific id
3. show and hide elemnets  using css
4. add and remove class       using css

* changeability property used.

1. use function showtab(id){
   
    if(id=='tabg1'){
        document.getElementById('tabg2').style.display='none';
        document.getElementById('tabg1').style.display='block';
        document.getElementById("anchor2").className=""
        document.getElementById("anchor1").className="active"
       
        }
    else {
        document.getElementById('tabg1').style.display='none';
        document.getElementById('tabg2').style.display='block';
        document.getElementById("anchor2").className="active"
        document.getElementById("anchor1").className=""
        }
}



 <div id="tabnav">
            <ul>
               <li><a  id="anchor1" class="active" href="#" onclick="showtab('tabg1')">aaaaa</a></li>
               <li><a id="anchor2" class="" href="#" onclick="showtab('tabg2')">bbbbb</a></li>
            </ul>
    </div>


<div id="tabg1">
</div>


<div id="tabg2">
</div>-------------------------------- its good when you have only two tabs.
next i will show you how to do same with multiple tabs.

you need to understand a dom first. like to remove class form all the anchor tags inside a particular div ie we have id of a div.

we will call a function on click, this will remove all the default active class to links once and add the active class to the link which triggred the function call. along with that we will ask him to send us the div name which you want to dispaly. this solves our problem