博主是一枚前端小菜鸟,因为挺长时间没接触页面布局了,居然连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!
样式亲们可以自由发挥哦!