HTML+JS+CSS 实现TAB切换

先上效果图:

CSS代码:

	.tab-contain{
		padding:10px;
	    width: 100%;
	 }
	#tabs {
	    overflow: hidden;
	    width: 100%;
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}
	#tabs li {
	    float: left;
	    margin: 0;
	    padding:5px;
	   padding-bottom: 0px;
	}
	
	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;
	    box-shadow: 0 2px 2px rgba(0, 0, 0, .4);
	}
	
	 .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;
	}

HTML:

<div class="tab-contain">
    <!-- tab栏 -->
    <ul id="tabs">
      <li class="current"><a href="#" title="tab1">用地保障情况</a></li>
      <li><a href="#" title="tab2">总体分布情况</a></li>
      <li><a href="#" title="tab3">用地审批进展情况</a></li>
    </ul>
    
		  
    <!-- 对应显示内容 -->
    <div id="content">
      <div id="tab1" class="item show">
     <!-- 这边写第一页的内容 -->
    </div>
      
      <div id="tab2" class="item" >
        
  <!-- 这边写第二页的内容 -->
</div> <div id="tab3" class="item">
  <!-- 这边写第三页的内容 -->
</div> </div> </div>

JS代码:

	    $(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');
	         // alert($(this).attr('title'));
	          if($(this).attr('title')=="tab1"){
	        		 
                    //这边是打开第一页时候可以添加一些操作

	          }
	          if($(this).attr('title')=="tab2"){
	        		
                  //这边是打开第二页时候可以添加一些操作

	          }
	          if($(this).attr('title')=="tab3"){
	        		
                  //这边是打开第三页时候可以添加一些操作
	          }
	      });


	     $('#tabs a').hover(function(){
	        if(!$(this).parent().hasClass("current")){
	          $(this).parent().addClass("hoverItem");
	        }
	     },function(){
	        $(this).parent().removeClass("hoverItem");
	     });
	  });