Tab View with jquery example

Tab View with jquery example

HTML

<div class="container-tab">
<button class="click-tab1 red pointer">Tab 1</button>
<button class="click-tab2 blue pointer">Tab 2</button>
<button class="click-tab3 green pointer">Tab 3</button>
</div>

<article>
  <div class="tabview tab1">
    <h2>Content Tab 1</h2>
  </div>
  <div class="tabview tab2 hide">
    <h2>Content Tab 2</h2>
  </div>  
  <div class="tabview tab3 hide">
    <h2>Content Tab 3</h2>    
  </div>  
  
</article>

CSS

.red{color:red;}
.blue{color:blue;}
.green{color:green;}
.pointer{cursor:pointer;}
.pointer:active{position:relative;top:2px;}
.pointer:hover{border-bottom:1px solid;}
.hide{display:none;}

.tabview {
  padding:10px;
  background : beige;
  border :1px solid silver;
}

JavaScript

//Basic jquery
$(document).ready(function(){
    $(".click-tab1").click(function(){
        $(".tab1").css("display", "block");
        $(".tab2,.tab3").css("display", "none");
    });
    $(".click-tab2").click(function(){
        $(".tab2").css("display", "block");
        $(".tab1,.tab3").css("display", "none");
    });   
    $(".click-tab3").click(function(){
        $(".tab3").css("display", "block");
        $(".tab1,.tab2").css("display", "none");
    });    
});