このjsを複数設定したい
下記のjsを同ページ内に複数設定したいのですが、
どこかがバッティングしているようで、最後の記述文しか機能しません。
どうすれば、うまく両方とも機能するでしょうか？
(function( $ ) {
$.fn.basicTabs = function(options){
var settings = $.extend({
active_class1: "current1",
list_class1: "tabs1",
content_class1: "tab_content1",
starting_tab1: 1
}, options );
var $content = $('.' + settings.content_class1);
var $list = $('.' + settings.list_class1);
$content.find('div').hide();
$content.find("div:nth-child(" + settings.starting_tab1 + ")").show();
$list.find("li:nth-child(" + settings.starting_tab1 + ")").addClass(settings.active_class1);
$("." + settings.list_class1 + ' li a').click(function(e){
$list.find("li").removeClass(settings.active_class1);
$("." + settings.content_class1 + " > div").hide();
$(this).parent().addClass(settings.active_class1);
var currentTab1 = $(this).attr('href');
$(currentTab1).show();
e.preventDefault();
});
};
}( jQuery ));
(function( $ ) {
$.fn.basicTabs = function(options){
var settings = $.extend({
active_class2: "current2",
list_class2: "tabs2",
content_class2: "tab_content2",
starting_tab2: 1
}, options );
var $content = $('.' + settings.content_class2);
var $list = $('.' + settings.list_class2);
$content.find('div').hide();
$content.find("div:nth-child(" + settings.starting_tab2 + ")").show();
$list.find("li:nth-child(" + settings.starting_tab2 + ")").addClass(settings.active_class2);
$("." + settings.list_class2 + ' li a').click(function(e){
$list.find("li").removeClass(settings.active_class2);
$("." + settings.content_class2 + " > div").hide();
$(this).parent().addClass(settings.active_class2);
var currentTab2 = $(this).attr('href');
$(currentTab2).show();
e.preventDefault();
});
};
}( jQuery ));
上記のようにそれぞれ別に同ページ内で機能させたいです。
よろしくお願いします。
お礼
ご回答ありがとうございます。 自分でも色々試してみました。 tabs.remove(index); で消すことが出来ました。 Ext jsは資料が少ないし、回答して頂ける方も少ないので 助かりました。 本当にありがとうございました。