jq封装选项卡写法

jq普通选项卡写法：

var tabTag=$('#tabon');var tabon=tabTag.find('li');//菜单栏var tabCon=$(".hidden");//隐藏内容类名tabon.each(function(i){$(this).hover(function(){tabon.removeClass("cur");$(this).addClass("cur");//当前加类名tabCon.eq(i).show().siblings().hide();//隐藏内容切换和显示}) })

 

 jq封装选项卡写法：

 

function Tab(option){this.root=$(option.root);this.tabTag=this.root.find('#tabon li');//菜单栏this.hidden=this.root.find('.hidden');//隐藏内容this.init(); } Tab.prototype={init:function(){var that=this;this.tabTag.each(function(i){$(this).hover(function(){that.tabTag.removeClass('cur');$(this).addClass('cur');that.hidden.eq(i).show().siblings().hide(); })})} } $(function(){new Tab({'root':$('#tab')}) ; })

 

 htm结构：

 

<div class="tab tab_ship" id="tab"><div class="tabon" id="tabon"><ol><li class="cur"><a href="#">菜单一</a></li><li><a href="#">菜单二</a></li></ol></div><!--/tabon--><div class="tabcon"><div class="hidden" style="display:block;"></div><div class="hidden" > </div></div><!--/tabcon--> </div>

 

 

 

 

 

转载于:https://www.cnblogs.com/hxh-hua/p/3321900.html

总结

以上是生活随笔为你收集整理的jq封装选项卡写法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。