jquery simple image navigation plug-in jquery.imgNav.js_jquery

Those who are familiar with jquery can probably do it in 5 to 10 minutes. Since this kind of navigation effect is relatively common, LEVIN conveniently wrote a jquery plug-in~

If your website also needs similar effects, you can use it directly or extend it:)

If You may also want to try to encapsulate some reusable functions into jquery plug-ins. Don't forget to take a look at the general jquery plug-in development process, and there is also a jquery plug-in template.

Copy code The code is as follows:

;(function($) {
// Private functions.
var p = {};
p.showC = function(opts) {
///

show content of a specified navigation

p._clist.hide().filter(opts.filter).show();
}; //showNav
p.onNav = function(evt) {
p._i=$(this) ;
p._alist.removeClass(p._opts.on);
p._i.addClass(p._opts.on);
p.showC({ filter:p._i.attr(" href") });
return false;
}; //onClick
//main plugin body
$.fn.imgNav = function(options) {
// Set the options .
options = $.extend({}, $.fn.imgNav.defaults, options);
p._opts = options;
// Go through the matched elements and return the jQuery object.
return this.each(function() {
p._alist = $("a", this);
p._clist = $(p._opts.navc);
p._alist. click(p.onNav);
});
};
// Public defaults.
$.fn.imgNav.defaults = {
on: 'on',
off: 'off',
navc: '.navc'//nav content selector
};
})(jQuery);