一个很简洁的jQuery选项卡插件，只要你不是前端傻子，看一会儿就能明白怎么使用的。
这个效果很赞的，可以作鼠标经过切换，也可以作鼠标点击切换。关键是可以无限重复使用，稍作修改，也可以作嵌套Tab页签效果。属于必须收藏的那种效果！
不再啰嗦，下面可能是你不常看到如此简洁干净的demo了。
简洁的jQuery选项卡(Tab页签)插件 Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简洁jQuery选项卡插件 - www.tonjay.com</title>
<meta name="keywords" content="简洁jQuery选项卡插件 www.tonjay.com" />
<meta name="description" content="简洁jQuery选项卡插件 www.tonjay.com" />
</head>
<style>
* {
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Noto Sans CJK SC, WenQuanYi Micro Hei, Arial, sans-serif;
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
body {
max-width: 640px;
margin:50px auto;
}
ul {
display: table;
text-align: center;
width: 100%;
background: linear-gradient(#f5f5f5, #eee);
border-radius: 3px;
line-height: 40px;
overflow: hidden;
}
li {
display: table-cell;
cursor: pointer;
}
li:not(:last-child) {
border-right: 1px solid rgba(0, 0, 0, 0.05);
}
li:hover {
background: linear-gradient(#eee, #e5e5e5);
}
li.active {
background:linear-gradient(#444,#333);
color: #fff;
}
.content-1,.content-2{
padding: 40px; border: 1px solid #eee;
margin-top: 10px;
border-radius: 3px;
}
.tab-2{margin-top: 50px;}
</style>
<body>
<ul class="tab-1">
<li>TONJAY.COM</li>
<li>TONJAY.COM</li>
<li>TONJAY.COM</li>
</ul>
<div class="content-1">
<div class="content-item">
<p>This the one!鼠标点击切换</p>
<p>From <a href="http://www.tonjay.com">www.tonjay.com web前端资源网</a></p>
</div>
<div class="content-item">
<p>鼠标点击切换 This the two</p>
<p>Frome <a href="http://www.tonjay.com">web前端资源网 www.tonjay.com</a></p>
</div>
<div class="content-item">
<p>This the three!鼠标点击切换</p>
<p>From <a href="http://www.tonjay.com">www.tonjay.com web前端资源网</a></p>
</div>
</div>
<ul class="tab-2">
<li>TONJAY.COM</li>
<li>TONJAY.COM</li>
</ul>
<div class="content-2">
<div class="content-item">
<p>This the one 鼠标经过切换</p>
<p>From <a href="http://www.tonjay.com">www.tonjay.com web前端资源网</a></p>
</div>
<div class="content-item">
<p>鼠标经过切换 This the two</p>
<p>Frome <a href="http://www.tonjay.com">web前端资源网 www.tonjay.com</a></p>
</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
function Tab(tab,content,events){
$(tab).find("li:first").addClass("active");
$(content).find(".content-item").not(":first").hide();
$(tab).on(events,"li",function(){
$(this).addClass("active").siblings().removeClass("active");
var itemIndex = $(this).index();
$(content).find(".content-item").eq(itemIndex).show().siblings().hide();
})
}
Tab(".tab-1",".content-1","click");
Tab(".tab-2",".content-2","mouseenter");
})
</script>
</body>
</html>
川公网安备 51010702002669号
18605917465
客服QQ