jquery tab plug-in production implementation code_jquery

The basic format of the jquery plug-in:

Copy code The code is as follows:

(function($){
$.fn.tab = function(options){//The tab after $.fn is the function name of this plug-in. You can modify it according to your own preferences.
var defaults = {
//Related attributes Settings
}
var options = $.extend(defaults, options);
this.each(function(){
//Function settings implemented});
};
})(jQuery);

I am making a tab plug-in here. I will improve the above code

Copy code The code is as follows:

(function($){
$.fn.tab = function(options){
var defaults = {
eventname: "click", //Trigger event, click is click, mousemove is mouse movement
titlekeyid: "tabtitle",//Switching ID
sedcss: "sed",//CSS when selected
nosedcss :"nosed" //CSS when not selected
}
var options = $.extend(defaults, options);
this.each(function(){
var tab=$(this );
//Bind event
$(tab).find("li").bind(options.eventname,function(){
$("#" options.titlekeyid).find( "li").attr("class", options.nosedcss);
$(this).attr("class", options.sedcss);
$("#" options.titlekeyid "info") .find("div").css("display", "none");
$("#" $(this).attr("id") "info").css("display", " block");
//My JS ability is still limited and I feel that the code is not well written
});
});
};
})(jQuery);

I think everyone has used some jquery plug-ins. Let me take a look at the code when using the plug-in:
(Code 2)

Copy code The code is as follows:

Combine the above two paragraphs Code for description

Copy code The code is as follows:

$("#tabtitle") means you Where to use it? Anyone who knows a little about jquery will know what it means. I won’t introduce it in detail.
.tab is the function name we defined for this plug-in. Compare it to $.fn.tab in (Code 1) tab in .
.tab({eventname:"mousemove",sedcss:"sed"}); The eventname and sedcss are the attribute values ​​defined in (code 1) var defaults ={};. If we do not need to change the attribute value, then we use the default attribute value, then the plug-in should be used like this

Finally, attach all the page codes:

Copy code The code is as follows:

< ;body>

//The ID here corresponds to the ID in $("#tabtitle"), and the ID of LI is the number added at the end

• asdfasfd


• asdfasfd


• asdfasfd


• asdfasfd


• asdfasfd

//The ID here is the ID in ul, the ID is the number added at the end and "info" respectively

000000

< ;div id="tabtitle2info" style=" display:none">111111

22222

< ;div id="tabtitle4info" style=" display:none">33333

44444

< ;/div> Please forgive me

Source code package download