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封装选项卡写法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。