博主是一枚前端小菜鸟，因为挺长时间没接触页面布局了，居然连tab栏切换都给忘了，后来博主看了一些前端资料还有书，发现网上的很多方法都杂乱无章，看的云里雾里的，冗余代码太多，这让新手小白会很苦恼，所以博主想自己通过小菜鸟的视角来写一个用jquery实现的tab栏切换，而且复制粘贴代码到你们自己的编辑器，就能直接查看效果的哦，非常方便比心♥♥，喜欢博主写的文章的可以顶一下，或者再底下评论哈，让我知道你们的存在，让我们共同进步！
好了，废话不多说，直接上代码！
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}.wrapper {width: 1000px;height: 475px;margin: 0 auto;margin-top: 100px;}.tab {border: 1px solid #ddd;border-bottom: 0;height: 36px;width: 320px;}.tab li {position: relative;float: left;width: 80px;height: 34px;line-height: 34px;text-align: center;cursor: pointer;border-top: 4px solid #fff;}.tab span {position: absolute;right: 0;top: 10px;background: #ddd;width: 1px;height: 14px;overflow: hidden;}.products {width: 1002px;border: 1px solid #ddd;height: 476px;}.products .main {float: left;display: none;}.products .main.selected {display: block;}.tab li.active {border-color: red;border-bottom: 0;}</style><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<div class="wrapper"><ul class="tab"><li class="tab-item active">标题1♥</li><li class="tab-item">标题2♥</li><li class="tab-item">标题3♥</li><li class="tab-item">标题4♥</li></ul><div class="products"><div class="main selected"><span class="a">1</span></div><div class="main"><span class="a">2</span></div><div class="main"><span class="a">3</span></div><div class="main"><span class="a">4</span></div></div>
</div></body><script>$(function () {$(".wrapper .tab-item").click(function () {$(this).addClass("active").siblings().removeClass("active");$(".products .main").eq($(this).index()).show().siblings().hide();})})</script>
</html>
具体效果看gif！
样式亲们可以自由发挥哦！
