前端JS实现tab切换，不一样的Tab切换
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab切换</title>
<meta name="author" content="OnionSir" />
<meta name="keywords" content="Tab,Tab切换" />
<meta name="description" content="Tab切换效果" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta charset="utf-8" />
<script src="../js/jquery-1.9.1.js"></script>
<style>
* { margin: 0; padding: 0; transition: all .4s ease-in-out; font-size: 14px; }
a { text-decoration: none; color: #000; }
a:hover, .os-con-TabBtn p:hover, .tabBtn-sel { color: #777; }
li { list-style: none; }
body { width: 100%; height: 100%; background: #eee; }
.os-go-back { display: block; margin: 20px 0; font-size: 30px; text-align: center; }
.os-content { width: 400px; height: auto; background: #fff; padding: 10px; margin: 0 auto; }
.os-con-TabBtn { width: 100%; height: auto; overflow: hidden; border-bottom: 1px solid #777; }
.os-con-TabBtn p { float: left; padding: 0 20px; margin: 10px 0; cursor: default; }
.os-con-TabBtn p:nth-child(1) { border-right: 1px solid #777; }
.os-con-TabCon { width: 0; height: 0; margin: 0 auto; line-height: 30px; overflow: hidden;transition:all .6s ease-in-out; }
.tabCon-sel { width: 390px; height: 150px; }
.os-con-TabCon li { width: 100%; height: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
</style>
</head>
<body>
<a href="javascript:history.go(-1)"><<返回博客</a>
<div>
<div>
<p>促销</p>
<p>公告</p>
<a href="http://www.dreamlod.cn" style="float:right;margin:10px 0;">更多>></a>
</div>
<ul class="os-con-TabCon tabCon-sel">
<li><a href="http://www.dreamload.cn" title="洗衣机大促销">洗衣机大促销</a></li>
<li><a href="http://www.dreamload.cn" title="冰箱限时折扣，绝不错过">冰箱限时折扣，绝不错过</a></li>
<li><a href="http://www.dreamload.cn" title="努比亚z17s直讲200元">努比亚z17s直讲200元</a></li>
<li><a href="http://www.dreamload.cn" title="物美价廉，物有所值，这里有你所需，绝不错过，先到先得！你还是在等什么？！">物美价廉，物有所值，这里有你所需，绝不错过，先到先得！你还是在等什么？！</a></li>
<li><a href="http://www.dreamload.cn" title="圣诞好礼满1000元立省200元！">圣诞好礼满1000元立省200元！</a></li>
</ul>
<ul>
<li><a href="http://www.dreamload.cn" title="大家电订单超期自动取消公告">大家电订单超期自动取消公告</a></li>
<li><a href="http://www.dreamload.cn" title="西宁本地仓开仓公告">西宁本地仓开仓公告</a></li>
<li><a href="http://www.dreamload.cn" title="关于召回普利司通（天津）轮胎有限公司2个规格乘用车轮胎的公告">关于召回普利司通（天津）轮胎有限公司2个规格乘用车轮胎的公告</a></li>
<li><a href="http://www.dreamload.cn" title="优惠凭证通知">优惠凭证通知</a></li>
<li><a href="http://www.dreamload.cn" title="特惠电商物流变更信息">特惠电商物流变更信息</a></li>
</ul>
</div>
<script>
$(function () {
$(".os-con-TabBtn p").hover(function () {
var selIndex = $(this).index();
$(this).addClass("tabBtn-sel").siblings().removeClass("tabBtn-sel");
$(".os-con-TabCon").eq(selIndex).addClass("tabCon-sel").siblings().removeClass("tabCon-sel");
});
})
</script>
</body>
</html>
代码均为原创，存在不足还请见谅！
如有转载请注明来源： www.dreamload.cn/blog/?p=51&preview=true （洋葱先生-杨少通）
752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
