<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.active{
background: green;
}
.content div{
display: none;
}
</style>
</head>
<body>
<div class="tab" id="tab">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<div class="content">
<div>aaaaaaaa</div>
<div>bbbbbbbb</div>
<div>cccccccc</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.js"></script>
<script>
function Person(element,opt){
self=element,
defaults={
'width':'50px',
'height':'30px',
'background':'red',
'fontSize':'18px',
'color':'#fff',
'display':'inline'
}
/*create=$.extend({},defaults,opt,add)*/
}
Person.prototype.props=function(){
return self.find("li").css({
'width':defaults.width,
'height':defaults.height,
'background':defaults.background,
'fontSize':defaults.fontSize,
'color':defaults.color,
'display':defaults.display,
});
}
Person.prototype.handleClick=function(){
return self.find("li").on("click",function(){
$(this).css("background","green");
var index=$(this).index();
Person.prototype.hadnleDisplay(index);
})
}
Person.prototype.hadnleDisplay=function(i){
self.find(".content").children('div').eq(i).show().siblings().hide();
}
$.fn.myObj=function(element,options){
var obj=new Person(this,options);
obj.props();
obj.handleClick();
}
$(function(){
$("#tab").myObj();
})
</script>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦