Simple tabs with jquery

Hello friends. Here is the code for simple tabs. Fully customizable script. Add as many tabs as you want. Just copy and paste this code into your html.
The css

  <style type="text/css">
  #box {
   width: 289px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
  }
  #tabs {
   height: 20px;
  }
  .myTab {
   height: 20px;
   width: 70px;
   float: left;
   cursor: pointer;
   text-align: center;
   background-color: #dddddd;
   margin: 0 1px 0 1px;
   padding-top: 5px;
   -moz-border-radius: 6px 6px 0px 0px;
   -webkit-border-radius: 6px 6px 0px 0px;
   border-radius: 6px 6px 0px 0px;
  }
  .active {
   color: #FFFFFF;
   background-color: #ee6a6a;
  }
  #contents {
   background-color: #6cc7d8;
   height: 145px;
   padding: 10px;
   margin-top: 5px;
  }
 </style>

The Html

   <div id="box">
    <div id="tabs">
      <div class="myTab active" id="tab1">Tab 1</div>
      <div class="myTab" id="tab2">Tab 2</div>
      <div class="myTab" id="tab3">Tab 3</div>
      <div class="myTab" id="tab4">Tab 4</div>
    </div>
    <div id="contents">
      <div class="myContant" id="tab1Contents"> 1 1 1 1 1 1 1 1 1 1 1 1 1</div>
      <div class="myContant" id="tab2Contents" style="display:none;"> 2 2</div>
      <div class="myContant" id="tab3Contents" style="display:none;"> 3 3</div>
      <div class="myContant" id="tab4Contents" style="display:none;"> 4 4</div>
    </div>
 </div>

The javascript

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
  </script>
  <script type="text/javascript">
   $(document).ready(function(){
    $(".myTab").click(function(){
     var tab=$(this).attr('id');
     $('.myContant').hide();
     $('#'+tab+'Contents').show();
     $('.myTab').removeClass('active');
     $('#'+tab).addClass('active');
    });
   });
  </script>

The Example demo

Tab 1

Tab 2

Tab 3

Tab 4

1 1 1 1 1 1 1 1 1 1 1 1 1

2 2

3 3

4 4