该功能比較简单。巩固一下jquery插件写法，注意引入的jquery.js 、 自己定义插件路径代码例如以下：
页面：
自己定义插件：
该插件遵循固定模板：
如
;(function($){
/**入口函数**/$.fn.optionChange = function(opts){ };/**插件内部逻辑函数**/$.fn.optionChange.methods = { };/**默认參数块**/$.fn.optionChange.defaults = { };/**属性參数**/$.fn.optionChange.parseOptions = function(target){ }; })(jQuery);;(function($){ /**入口函数**/ $.fn.optionChange = function(opts){ this.each(function(){ opts.currObj = $(this); opts = $.extend({},$.fn.optionChange.defaults,opts,$.fn.optionChange.parseOptions); var tobjlen = opts.currObj.find('.'+opts.triggerObjClass).length; var lobjlen = opts.currObj.find('.'+opts.linkObjClass).length; if(tobjlen && lobjlen && tobjlen === lobjlen){ $.fn.optionChange.methods.init(opts); } }); }; /**插件内部逻辑函数**/ $.fn.optionChange.methods = { init:function(opts){ var event = opts.event; var triggerObjClass = opts.triggerObjClass; var linkObjClass = opts.linkObjClass; var currObj = opts.currObj; var linkSelectFn = opts.linkSelectFn; currObj.find('.'+triggerObjClass).on(event,function(){ $this = $(this); $this.addClass(opts.triggerSelectCss).siblings().removeClass(opts.triggerSelectCss); var _linkObj = currObj.find('.'+opts.linkObjClass).eq($this.index()); _linkObj.addClass(opts.linkSelectCss).siblings().removeClass(opts.linkSelectCss); }); } }; /**默认參数块**/ $.fn.optionChange.defaults = { event:'', triggerObjClass:'tiggerClass', triggerSelectCss:'', linkObjClass:'linkClass', linkSelectCss:'', currObj:{} }; /**属性參数 该功能用不到属性參数 故返回空对象**/ $.fn.optionChange.parseOptions = function(target){ return {}; };})(jQuery);若须要了解属性參数什么含义请阅读 ：