<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>JS mobile side Tab touch screen sliding effect</title>
<link rel="stylesheet" href="css/base.css" />
<script type="text/javascript" src="js/TouchSlide.1.0.js"></script>
<style>
a{text-decoration:none;color:#000;}
.tabBox .hd{ height:40px; line-height:40px; padding:0 10px; font-size:20px; background:#F3F3F3; border-top:2px solid #CECECE; }
.tabBox .hd ul{ overflow:hidden; }
.tabBox .hd ul li{ float:left; margin:0 10px; color:#515151; }
.tabBox .hd ul .on{ border-bottom:2px solid #BA2636; color:#BA2636; }
.tabBox .hd ul .on a{ display:block;}
.tabBox .bd ul{ padding:10px 0 10px 10px; }
.tabBox .bd li{ height:33px; line-height:33px; }
.tabBox .bd a{ -webkit-tap-highlight-color:rgba(0,0,0,0); }
.tabBox .bd li a{ color:#555; }
.tabBox .bd .t{ height:85px; overflow:hidden; }
.tabBox .bd .t .pic{ width:130px; float:left; }
.tabBox .bd .t .con{ margin-left:130px; line-height:20px; }
.tabBox .bd .t .con p{ font-size:12px; color:#999; }
</style>
</head>
<body>
<div id="leftTabBox" class="tabBox">
<div class="hd">
<ul>
<li><a href="#">列表一</a></li>
<li><a href="#">列表二</a></li>
<li><a href="#">列表三</a></li>
</ul>
</div>
<div class="bd">
<ul>
<li class="t">
<div class="pic"><img src="img/wyNewPic.jpg" /></div>
<div class="con">
<a class="tit">onestopweb</a>
<p>The sad return to the wind shakes Huixi, and the heart is wounded and internally hurt. Things are small and fall in nature, and sounds are hidden and advocated first. </p>
</div>
</li>
<li><a href="#">Read who asks you to recite, the fragrance will float in the water 1</a></li>
<li><a href="#">Read who asks you to recite, the fragrance will float in the water 1</a></li>
<li><a href="#">Read who asks you to recite, the fragrance will float in the water 1</a></li>
<li><a href="#">Read who asks you to recite, the fragrance will float in the water 1</a></li>
<li><a href="#">Read who asks you to recite, the fragrance will float in the water 1</a></li>
</ul>
<ul>
<li><a href="#">Read who asks you to chant, the fragrance floats in the water 2</a></li>
<li><a href="#">Read who asks you to chant, the fragrance floats in the water 2</a></li>
<li><a href="#">Read who asks you to chant, the fragrance floats in the water 2</a></li>
<li><a href="#">Read who asks you to chant, the fragrance floats in the water 2</a></li>
<li><a href="#">Read who asks you to chant, the fragrance floats in the water 2</a></li>
<li><a href="#">Read who asks you to chant, the fragrance floats in the water 2</a></li>
<li><a href="#">Read who asks you to chant, the fragrance floats in the water 2</a></li>
<li><a href="#">Read who asks you to chant, the fragrance floats in the water 2</a></li>
</ul>
<ul>
<li><a href="#">Read who asks the king to chant, the water falls and the fragrance floats 3</a></li>
<li><a href="#">Read who asks the king to chant, the water falls and the fragrance floats 3</a></li>
<li><a href="#">Read who asks the king to chant, the water falls and the fragrance floats 3</a></li>
<li><a href="#">Read who asks the king to chant, the water falls and the fragrance floats 3</a></li>
<li><a href="#">Read who asks the king to chant, the water falls and the fragrance floats 3</a></li>
<li><a href="#">Read who asks the king to chant, the water falls and the fragrance floats 3</a></li>
<li><a href="#">Read who asks the king to chant, the water falls and the fragrance floats 3</a></li>
<li><a href="#">Read who asks the king to chant, the water falls and the fragrance floats 3</a></li>
</ul>
</div>
</div>
<script type="text/javascript">TouchSlide({ slideCell:"#leftTabBox" });</script>
</body>
</html>
Effect picture: