SOURCE

$(function(){
  $("#tabs a").click(function(e){
    e.preventDefault();
    $("#tabs li").removeClass("current").removeClass("hoverItem");
    $(this).parent().addClass("current");
    $("#content div").removeClass("show");
    $("#"+$(this).attr("title")).addClass("show");
  });
  $("#tabs a").hover(function(){
    if(!$(this).parent().hasClass("current")){
      $(this).parent().addClass("hoverItem");
    }
  },function(){
    $(this).parent().removeClass("hoverItem");
  })
})

<div class="tab-contain">
  <ul id="tabs">
    <li class="current">
      <a href="#" title="tab1">
        one
      </a>
    </li>
    <li>
      <a href="#" title="tab2">
        two
      </a>
    </li>
    <li>
      <a href="#" title="tab3">
        three
      </a>
    </li>
  </ul>
  <div id="content">
    <div class="item show" id="tab1">
      <h1>
        1111111111
      </h1>
    </div>
    <div class="item show" id="tab2">
      <h1>
        2222222222
      </h1>
    </div>
    <div class="item show" id="tab3">
      <h1>
        3333333333
      </h1>
    </div>
  </div>
</div>

.tab-contain {
  margin: 50px auto;
  width: 1000px;
  //padding:100px;
  background#7f7d7d;
}

#tabs {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tabs li {
  float: left;
  margin: 0;
}

li a {
  position: relative;
  background: #ddd;
  padding: 10px 50px;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  border-radius: 20px 20px 0 0;
}

.current a {
  outline: 0;
  background: #fff;
  z-index: 4;
}

.hoverItem a {
  background: #aac8b9;
}

#content {
  background: #fff;
  padding: 50px;
  height: 220px;
  position: relative;
  border-radius: 0 5px 5px 5px;
  box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

.item {
  display: none;
}

.show {
  display: block;
}