simple tab navigator jquery

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.tab{background: cadetblue;border: solid 1px;text-align: center;width: 22%;height: 8%;border-radius: 5%;margin-left: 1%;}
.contant{background: beige;width: 22%;text-align: center;display: none;margin-left: 1%;}
.bord{border: solid 1px;width: 25%;height: 6%;border-radius: 4%;background: darkcyan;}
</style>
<div id="container">
<div class="bord"></div>
<div id="tab" class="tab"> tab1 </div>
<div id="content" class="contant"> tab 1 contenttab 1 contenttab 1 contenttab 1 content </div>
<div id="tab" class="tab"> tab2 </div>
<div id="content" class="contant"> tab 2 contenttab 2 contenttab 2 contenttab 2 contenttab 2 content </div>
<div id="tab" class="tab"> tab3 </div>
<div id="content" class="contant"> tab 3 contenttab 3 content tab 3 content tab 3 content tab 3 content  </div>
</div>
<div class="bord"></div>
<script>
$("#container").children('.tab').click(function(){
$(this).parent().children('.contant').hide(1000);
$(this).next('.contant').show( "slow" );
});
</script>