Recently wrote an e-commerce website, to be compatible with ie8. Therefore, jquery is not used for a long time. Writing an effect can hurt your brain.

 

Horizontal tab, the content slides left and right when sliding tab

 

First, html code

<div class="container">
  	<div class="tabs-box">
  		<a class="active" href="#> > </a>
  		<a href="#> > two </a>
  		<a href="#> > three </a>
  	</div>
  	<div class="content-box">
  	   <div class="Jtab_item clearfix">
      		<div style="background:pink" class="content-item">Content 1</div>
      		<div style="background:red" class="content-item">Content two</div>
      		<div style="background:yellow" class="content-item">Content three</div>
  	   </div>
  	</div>
  </div>

Style layout

*{
			margin:0;
			padding:0;
		}
		a{
			text-decoration:none;
		}
		.clearfix:before,
		.clearfix:after{
            display:table;
            content:'';
            clear:both;
		}
		.container{
			position:relative;
			margin:200px 0 0 300px;
			width:300px;
			height:440px;
			overflow:hidden;
			border:1px solid #ccc;
			
		}
		.tabs-box{
			width:300px;
			height:40px;
			font-size:0;
		}
        .tabs-box a{
        	display:inline-block;
        	width:100px;
        	height:40px;
        	text-align:center;
        	line-height:40px;
        	font-size:12px;
        }
        .tabs-box a.active{
        	background:#f50030;
        	color:#fff;
        }
        .content-box{
          position:relative;
        	width:300px;
        	height:400px;
        	overflow:hidden;
        }
        .Jtab_item{
          position:absolute;
        	width:900px;
        	height:400px;
        }
        .Jtab_item .content-item{
        	width:300px;
        	height:400px;
        	float:left;
        }

. jtab item positioning is the key point, so be sure to understand why: position:absolute

After the layout and location are written, it's easy to write js, just move the jtab item layer

js code

 $('.tabs-box a').mouseover(function(){
   var _index=$(this).index();
   $('.tabs-box a').eq(_index).addClass('active').siblings().removeClass('active');
   $('.Jtab_item').animate({
    left:-_index *300
   },300)
  })

. .

The style doesn't look good, but the general effect is achieved. Fine style can be adjusted again