<div class="myTabs">
<ul class="myTabs"> 
        <li class="active" rel="tab1"> Call of Duty</li>
        <li rel="tab2"> Mortal Combat</li>
        <li rel="tab3"> Halo</li>
        <li rel="tab4"> Portal</li>
    </ul>

<div class="tab_container"> 

     <div id="tab1" class="tab_content"> 
 
         <p>
         <strong>
         Call of Duty: Black Ops bears the series' standard superbly,
         delivering an engrossing campaign and exciting competitive multiplayer.
         </strong>
         </p>

     </div><!-- #tab1 -->
     <div id="tab2" class="tab_content"> 

       <p>
       <strong>
       Mortal Kombat returns after a lengthy hiatus and puts players
       back into the Tournament for 2D fighting with gruesome combat.
       </strong>
       </p> <p>
       <strong>
       Mortal Kombat returns after a lengthy hiatus and puts players
       back into the Tournament for 2D fighting with gruesome combat.
       </strong>
       </p>
 <p>
       <strong>
       Mortal Kombat returns after a lengthy hiatus and puts players
       back into the Tournament for 2D fighting with gruesome combat.
       </strong>
       </p> <p>
       <strong>
       Mortal Kombat returns after a lengthy hiatus and puts players
       back into the Tournament for 2D fighting with gruesome combat.
       </strong>
       </p>
     </div><!-- #tab2 -->
     <div id="tab3" class="tab_content"> 

       <p>
       <strong>
       Halo: Reach is the culmination of the superlative combat, sensational
       multiplayer, and seamless online integration that are the hallmarks
       of this superb series.
       </strong>
       </p>

     </div><!-- #tab3 -->
     <div id="tab4" class="tab_content"> 

       <p>
       <strong>
       Portal 2 is an action shooter game from Valve Software that draws 
       from the original formula of innovative gameplay, story, and music,
       which earned the original Portal more than 70 industry accolades.
       </strong>
       </p>

     </div><!-- #tab4 --> 
     
 </div> <!-- .tab_container --> 
 
</div>

@import url("http://nvcnr.web44.net/stylesheet/reset.css");
@import url("http://fonts.googleapis.com/css?family=Roboto:100");
.myTabs { 
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  text-shadow: 0 0 1px rgba(0,0,0,0.5);
  margin: 20px;
  overflow: hidden;
  box-shadow: 4px 6px 10px 0 rgba(0,0,0,0.5);
  
}
ul.myTabs {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  width: 100%;
    font-size: 18px;
 }
 ul.myTabs li {
  float: left;
  margin: 0;
  cursor: pointer;
  padding: 0px 21px ;
  height: 31px;
  line-height: 31px;
  font-weight: bold;
  overflow: hidden;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
 }
 ul.myTabs li:hover {
  background: #CCCCCC;
 } 
 ul.myTabs li.active{
  background: rgba(0,0,0,0.1);
 }
 .tab_container {
  clear: both;
  float: left; 
  width: 100%;
  background: #FFFFFF;
 }
 .tab_content {
  padding: 20px;
  font-size: 1.2em;
  display: none;
    line-height: 1.5em;
 }
@media screen and (max-width: 600px) {
  ul.myTabs li {
    clear:both;
    width: 100%;
    padding-left:2%;
  cursor: pointer;
  font-weight: bold;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
 }
}
@media screen and (max-width: 400px) {
  ul.myTabs li {
    clear:both;
    text-align:center;
    width: 100%;
    padding-left:2%;
  cursor: pointer;
  font-weight: bold;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
 }
}
.myTabs.red { background-color: #E74C3C; }
.myTabs.green { background-color: #519E2A; }
.myTabs.blue { background-color: #0072C6; }
.myTabs.orange { background-color: #FF3D0D; }
.myTabs.purple { background-color: #800080; }

$(document).ready(function() {

 $(".tab_content").hide();
 $(".tab_content:first").show(); 

 $("ul.myTabs li").click(function() {
  $("ul.myTabs li").removeClass("active");
  $(this).addClass("active");
  $(".tab_content").hide();
  var activeTab = $(this).attr("rel"); 
  $("#"+activeTab).fadeIn(); 
 });
});