<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery左右滑动选项卡切换代码 - 网页模板</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
body{background:#fff;font:normal 12px/22px 宋体;}
img{border:0;}
a{text-decoration:none;color:#333;}
a:hover{color:#1974A1;}
/* tabBar */
.tabBar{width:600px;font-family:"Microsoft YaHei";margin:30px auto;}
.tabBar .hd ul{z-index:5;position:relative;zoom:1;}
.tabBar .hd li{float:left;height:24px;line-height:24px;margin-top:4px;padding:0px 16px 0px 16px;margin-right:5px;color:#333333;border:1px solid #c8d1d5;border-bottom:0px;cursor:pointer;}
.tabBar .hd li.on{height:27px;line-height:32px;font-weight:bold;overflow:hidden;margin-top:0px;position:relative;top:1px;border-top:2px solid #004ea2;background:#fff;}
.tabBar .hd li.on span{font-weight:bold;color:#c00;}
.tabBar .bd{border:1px solid #C8D1D5;padding:10px 40px 0 40px;clear:both;position:relative;height:200px;overflow:hidden;}
.tabBar .bd .conWrap{width:500px;}
.tabBar .prev,.tabBar .next{position:absolute;left:10px;top:80px;}
.tabBar .next{left:auto;right:10px;}
.tabBar .prevStop,.tabBar .nextStop{display:none;}
.tabBar .bd p{padding-bottom:10px}
</style>
</head>
<body>
<div class="tabBar">
<div class="hd">
<ul>
<li class="on">第<span>1</span>步 魔方网站</li>
<li>第<span>2</span>步 雨滴</li>
<li>第<span>3</span>步 移动推广</li>
</ul>
</div>
<div class="bd">
<div class="conWrap">
<div class="con">
<p>注册插件是当企业发起某个活动时，用户通过该插件进行手机注册并参与活动，<br>管理后台可以统计注册成功的手机号码，可导出。</p>
<p><img src="images/1.jpg"></p>
</div>
<div class="con">
<p>企业想的拥有自己的手机客户端？<br>让您的客户在手机上安装，把企业网站内容植入移动终端？</p>
<p><img src="images/2.jpg"></p>
</div>
<div class="con">
<p>让手机客户端进入app store、安卓市场提供下载和推广？<br>您还在为复杂的开发和高额的人力投入而发愁吗？</p>
<p><img src="images/3.jpg"></p>
</div>
</div>
<a class="prev prevStop" href="javascript:void(0)"><img src="images/lj.gif"></a>
<a class="next" href="javascript:void(0)"><img src="images/rj.gif"></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".tabBar").slide({
mainCell:".conWrap",
effect:"left",
trigger:"click",
pnLoop:false
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
