<!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 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦