tab选项卡效果, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tab选项卡效果</title> <link rel="stylesheet" type="text/css" href="css/myPlugin-base.css" /> <link rel="stylesheet" type="text/css" href="css/shop-base.css" /> </head> <body> <div id="tabDemo"> <ul class="tab"> <li class="cur">标签一</li> <li>标签二</li> <li>标签三</li> </ul> <div class="tabCn"> <div class="cur">内容一</div> <div>内容二</div> <div>内容三</div> </div> </div> </body> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/tab.js"></script> <script type="text/javascript"> $(function(){ $('#tabDemo').tab({ }); }) </script> tab.js (function($){ $.fn.extend({ tab:function(option){ var elm=$(this); var thisLi=elm.find('.tab li'); var conIds=$('.tabCn'); var defaults={}; var opt=$.extend(defaults,option); return this.each(function(){ var thisindex=conIds.find('div').eq(thisLi.index(this)); }); thisLi.hover(function(){ elm.addClass('cur'); elm.siblings().removeClass('cur'); thisindex.addClass('cur'); thisindex.siblings().removeClass('cur'); }); } }); })(jQuery); 刚开始学习写插件,也不知道是语法错了,还是哪里写的不对,就是出不来效果,您帮忙看看,不胜感激。
1 回答

慕森卡
TA贡献1806条经验 获得超8个赞
thisLi.hover(function(){
elm.addClass('cur');
elm.siblings().removeClass('cur');
thisindex.addClass('cur');
thisindex.siblings().removeClass('cur');
位置不对
应该是在
return this.each(function(){
var thisindex=conIds.find('div').eq(thisLi.index(this));
//应该在这里
});
添加回答
举报
0/150
提交
取消