面向对象之Tab组件
2017-06-26 本文已影响0人
李永州的FE
思路就是：1两个函数 2 第一个函数负责拿到对应的dom元素 第二个函数负责给拿到的dom元素绑定相应的事件 最后一个new就搞定了
<html><head>
<meta charset="utf-8">
<title>demo tab</title>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
.clear:after {
content: "";
display: block;
clear: both;
}
.tab {
width: 700px;
margin: 30px auto;
border: 1px solid #ccc;
border-radius: 4px;
padding: 30px;
}
.tab .tab-ct {
border-bottom: 1px solid #ccc;
}
.tab .tab-ct li {
padding: 10px 20px;
color: brown;
float: left;
cursor: pointer;
}
.tab .tab-ct .active {
color: black;
border: 1px solid #ccc;
border-bottom: 1px solid white;
border-radius: 4px 4px 0 0;
margin-bottom: -1px;
}
.tab .tab-content>li {
padding: 20px;
display: none;
}
.tab .tab-content .active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<ul class="tab-ct clear">
<li class="">Opinion1</li>
<li class="">Opinion2</li>
<li class="active">Opinion3</li>
</ul>
<ul class="tab-content">
<li class="">Content1</li>
<li class="">Content2</li>
<li class="active">Content3</li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var tab = (function(){
function Tab($node){
this.$node = $node;
this.init();
this.bind();
}
Tab.prototype.init = function(){
this.$opinion = this.$node.find(".tab-ct");
this.$content = this.$node.find(".tab-content")
}
Tab.prototype.bind = function(){
var _this = this
this.$opinion.on("click", function(e){
var idx = $(e.target).index();
_this.$opinion.children().removeClass("active");
_this.$opinion.children().eq(idx).addClass("active");
_this.$content.children().removeClass("active");
_this.$content.children().eq(idx).addClass("active");
})
}
return {
use: function($node){
new Tab($node)
}
}
})();
tab.use($(".tab").eq(0));
tab.use($(".tab").eq(1));
tab.use($(".tab").eq(2));
</script>
</body></html>
