jQuery纵向tab选项卡内容切换代码，先来看看效果：
部分核心的代码如下：
<!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纵向tab选项卡内容切换代码</title>
</head>
<body><script src="/demos/googlegg.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<div class="o-m">
<div class="ul-o">
<ul>
<li class="li-o"><span></span><p>客户充分信任您</p><div class="clear"></div><b></b></li>
<li class="li-t"><span></span><p>更多客户快速找到您</p><div class="clear"></div><b></b></li>
<li class="li-s"><span></span><p>销售网络快速扩张</p><div class="clear"></div><b></b></li>
<li class="li-f"><span></span><p>实时互动沟通转化率高</p><div class="clear"></div><b></b></li>
<li class="li-w"><span></span><p>超强电商管理引爆成交量</p><div class="clear"></div><b></b></li>
<li class="li-l"><span></span><p>强化维系客户，利润持续增长</p><div class="clear"></div><b></b></li>
<div class="li-mask"></div>
</ul>
</div>
<div class="ul-t">
<li style="display:block">
<div class="li-top">
<h5>客户充分信任您</h5>
<p>强大视觉冲击力提升网站形象实力，极具销售力的产品展示突出卖点，吸引眼球打动客户；</p>
<div class="li-a"><a>专业的官网</a><a>产品展示</a><a>文章展示</a><a>地图位置</a><a>走马灯</a><a>全屏浮动</a><a>视频</a><a>多种图文特效</a></div>
<div class="li-img"><img src="img/n-qyjz-40.gif" /></div>
</div>
</li>
<li>
<div class="li-top">
<h5>更多客户快速找到您</h5>
<p>PC端+手机端全网搜索引擎SEO优化，提升网站排名引流量，更多客户找到您，<br />强大推广方式+超强营销工具，扩大客流量、订单量</p>
<div class="li-a"><a>PC+手机端</a><a>SEO优化</a><a>一键分享传播</a><a>抢红包</a><a>朋友助力</a><a>众筹</a><a>好友赞助</a><a>一元夺宝</a></div>
<div class="li-img"><img src="img/n-qyjz-47.gif" /></div>
</div>
</li>
<li>
<div class="li-top">
<h5>销售网络快速扩张</h5>
<p>全新"分销加盟+三级返佣"模式体系，无限发展下游，让您的分销商满天下；</p>
<div class="li-a"><a>精美分销店铺</a><a>自选分销产品</a><a>一键分销</a><a>无限下级</a><a>分销商管理</a><a>佣金管理</a><a>推广文案管理</a></div>
<div class="li-img"><img src="img/n-qyjz-48.gif" /></div>
</div>
</li>
<li>
<div class="li-top">
<h5>实时互动沟通转化率高</h5>
<p>方便的客服沟通工具，实时互动咨询，快速提升询盘率和成交转化率，变流量为销量；</p>
<div class="li-a"><a>多种热门客服工具</a><a>微客服</a><a>在线留言板</a></div>
<div class="li-img"><img src="img/n-qyjz-49.gif" /></div>
</div>
</li>
<li>
<div class="li-top">
<h5>超强电商管理引爆成交量</h5>
<p>强大的商品管理，团购、秒杀等电商功能促进高销量，方便快捷的购物车及支付方式促成交，流量、业绩统计分析尽在掌握中；</p>
<div class="li-a"><a>产品管理</a><a>订单管理</a><a>物流配送管理</a><a>数据统计分析</a><a>团购</a><a>秒杀</a><a>砍价</a><br /><a>购物车</a><a>多种在线支付</a><a>扫码支付</a></div>
<div class="li-img"><img src="img/n-qyjz-50.gif" /></div>
</div>
</li>
<li>
<div class="li-top">
<h5>强化维系客户，利润持续增长</h5>
<p>客户管理、维系、关怀全方位，结合高效互动营销工具，深度挖掘新老客户潜力价值，刺激客户持续消费 </p>
<div class="li-a">
<span>客户管理：</span><a>会员管理</a><a>会员卡</a><a>会员预约</a><a>积分管理</a><a>优惠券</a><br />
<span>客户关怀：</span><a>签到</a><a>生日积分</a><a>充值</a><a>开卡</a><a>消费赠送</a><a>贺卡</a><br />
<span>抽奖互动：</span><a>大转盘</a><a>刮刮卡</a><a>砸金蛋</a><a>摇一摇</a><a>微现场</a><br />
<span>提升服务：</span><a>调研</a><a>投票</a>
</div>
<div class="li-img"><img src="img/n-qyjz-51.gif" /></div>
</div>
</li>
</div>
<div class="clear"></div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$('.o-m .ul-o li').hover(function () {
var linum = $(this).index()
$('.o-m .ul-t li').eq(linum).stop().show().siblings().hide()
})
$(function () {
var slip = $('.li-mask');
var a = $('.o-m .ul-o li:first');
//初始化滑块
slip.css({
'top': parseInt(a.position().top) + 'px'
});
$('.o-m .ul-o li').mouseenter(function () {
//显示滑块
if (slip.css('display') == 'none') {
slip.show();
};
//移动滑块
slip.stop().animate({
top: parseInt($(this).position().top) + 'px'
}, 300);
});
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
</div>
</body>
</html>
全部代码：jQuery纵向tab选项卡内容切换代码
扫一扫
702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
