Easily implement the jquery tab toggle effect _jquery

Early want to learn jquery plug-in writing, has been dragged to now, while no work busy, search some data learning, wrote a relatively simple tab effect.

At first there was a very popular example: theAlert dialog box .

Jquery.alertMsg.js

/**
 * [description]
 * @param {[type]} $ [description]
 * @return {[type]} [description] * *
( Function ($) {

 $.fn.alertmsg = function (options) {

 var defaults = {
  mouseevent: ' Clcik ',
  msg: ' Hello World '
 var options = $.extend (defaults, options);
 var $this = $ (this);

 $this. On (options.mouseevent, function (e) {
  alert (options.msg);
 }}

) (JQuery)

Call Mode:

<span id= "Test" >test</span>

$ (function () {
 $ (' #test '). Alertmsg ({
  mouseevent: "Click", 
  msg: "First write plugin!" 
 });

jquery Plug-in Structure

(function ($) {
 //Tabs custom plug-in name
 $.fn.tabs = function (options) {

  //set default parameter
  var defaults = {
   Activeclass: ' Active '
   ... 
  }
  Object extension
  var options = $.extend (defaults, options);

  Return $ (a). each (function () {
   //write corresponding implementation code}}

) (jQuery)

tab Implementation:

1, HTML structure

<div id= "tab" >
 <ul>
  <li> options 1</li>
  <li> option 2</li>
  <li > Options 3</li>
  <li> options 4</li>
 </ul>
 <div id= "Tabcon" class= "Tab-con" > Content
  of <div>1 </div>
  <div>2 </div>
  <div>3 content </div>
  < Div>4 content </div>
 </div>
</div>

2, Jquery.tabs.js

(function ($) {

 $.fn.tabs = function (options) {

   var defaults = {
    Event: ' Click ',
    activeclass: ' Active '
   }
   var options = $.extend (defaults, options);

   Return $ (a). each (function () {

    var $thisTab = $ (this). Find (' ul ');
    var $tabCon = $thisTab. Siblings (' div ');

    $tabCon. Find (' div '). each (the function () {
     $ (this). Hide ();
    });

    $thisTab. Find (' Li:first '). addclass (Options.activeclass);
    $tabCon. Find (' Div:first '). Show ();

    $thisTab. Find (' Li '). each (the function (index) {

     $ (this). On (options. Event, function () {

      $ (this). Siblings (). Removeclass (Options.activeclass);
      $ (this). addclass (Options.activeclass);
      $tabCon. Find (' div '), eq (index), show (). siblings (). Hide ();

     });
 
(JQuery)

3. Call

 $ (' #tab '). Tabs ({
  activeclass: ' Active '
 });

Summary: the first knowledge of jquery plug-ins, the feeling should continue to optimize and expand, continue to learn!

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Wonderful topic Sharing:JavaScript Tab Action method Summary jquery Tab action Method Rollup