How should I be sharing Javascript functions across multiple pages?

I don't completely understand how javascript works in an OOP model, so I come to stack overflow for wisdom.

My example code:

(function($) {
var $container = $('#container');
var $sidebar = $('#sidebar');


// Sidebar  
var currTab = $('#s1');

if(currTab) {
    currTab.parent().parent().parent().addClass('selectedTop');
    currTab.find(".sideContent").delay(300).slideToggle("slow");
    currTab.addClass('selected');
}

$('#sideTop').delegate('li', 'hover', function(event) {
    var $this = $(this);
    if (event.type == 'mouseenter') {
        if(!$this.hasClass("selected")){
            $this.siblings(".selected").children(".sideContent").toggle();
            $this.siblings(".selected").removeClass('selected');
            $this.find(".sideContent").toggle().addClass('selected');
            $this.addClass('selected');
        }
    }
});


})(this.jQuery);

This code caches my container and sidebar div and controls the hovering of tabs on my sidebar. These will be on every page, so I originally just included the js file on each page and it works as usual. Now I've gotten t开发者_JAVA技巧o a point where I want to customize each page with a specific tab of the sidebar open by default (defined by the currTab variable). When set, it will open by default, and stay open after the mouse leaves the sidebar.

I haven't found a way to customize currTab on each page without having to completely re-paste all the code associated with the sidebar, making any updates to the script cumbersome.

How should I be approaching this? Thanks

---

I'm sorry to have caused confusion with my lack of understanding, but one of the related questions answered mine in a way I didn't know how to search for:

He setup a "class" first, which could be included as a seperate JS, then communicated using jQuery.ClassName(options)

I've tried it and it works perfectly, seperating the code that is consistent, with the values that will change on each page.

(function($){
var undefined;

$.ClassName = function(options){
    var self = this;
    var cfg = $.extend(true, {}, this.defaults, options);

    // ********************
    // start:private
    // ********************
    function _init(){

    };

    // ********************
    // start:public
    // ********************
    this.methodName = function(){

    };

    _init();
};

$.ClassName.prototype.defaults = {};
})(jQuery);

---

With classes. Just add a class such as "currTab" to whichever tab is active. In your JS, check for that class on the tab, and when the tab is changed, remove that class from the old one and add it to the new one.

---

Add a class to the item you want to be active by default. Use JS to detect the class and react accordingly.

---

One way is, to declare currTab differently inside each HTML page, and remove "var currTab = $('#s1');" from your JavaScript file. The rest of currTab occurences in the JavaScript file are still able to reference it.