jquery implementation Tab TAB switch effect simple demo _jquery

The example of this article is a simple demonstration of the implementation of the Tab tab switching effect in jquery, which is entirely the process of thinking and sharing for everyone's reference. Specifically as follows:

At first my HTML code shelf is like this:

<div class= "tabs" >  
  <ul>
   <li class= "acss" data-box= "#panel-1" > tags 1</li>
   <li class= "Bcss" data-box= "#panel-2" > Label 2</li>
   <li class= "bcss" data-box= "#panel-3" > Label 3</li>
  </ul>
  <div id= "panel-1" > Content 111111</div> <div id= "Panel-2" style= "Display:none"
  ; > Content 222222</div>
  <div id= "panel-3" style= "Display:none"; > Content 333333</div>
</div>

It was later replaced by the following:

<dl class= "tabs" >
  <dt>
   <a class= "acss" href= "#panel-1" > tags 1</a>
   <a-class= " Bcss "href=" #panel-2 "> tags 2</a>
   <a class=" bcss "href=" #panel-3 "> tags 3</a>
  </dt>
  <dd id= "panel-1" > Content 1</dd> <dd id= "Panel-2" style=
  "Display:none;" > Content 2</dd>
  <dd id= "panel-3" style= "Display:none"; > Content 3</dd>
 </dl>

This is because I think the DL DT DD in the page layout with less than the Div ul Li, so you can do better isolation. We use JS operation DL DT DD object, will have less impact on other elements of the page, there is not in the LI tag to customize the Data-box attribute, more in line with the standard page writing. And the overall sense of the structure is better than the one above.
The implementation code for the plug-in is as follows:

(function ($) {
   $.fn. Tabs = function (options) {
    //default parameter set
    var settings = {
     beforecss: "Bcss",///Before activation style name
     aftercss: "AcSS",//Activated Style name
     model: "MouseOver"//Toggle Mode ("MouseOver" or "click")
    };

    is not empty, the merge parameter
    if (options)
     $.extend (settings, options);

    Get a tag set
    var arr_a = $ ("> dt > A", this);

    Bind event
    Arr_a.each (function () {$ (this) to the a label respectively
     . bind (Settings.model, function (event) {
//Remove a label The anchor point jumps
    event.preventdefault ();
      Style control
      $ (this). Removeclass (). addclass (SETTINGS.AFTERCSS).
      siblings ("a"). Removeclass (). addclass ( SETTINGS.BEFORECSS);
      Hide and Display control
      var dd_id = $ (this). attr ("href");
      $ (dd_id). Show (). Siblings ("DD"). Hide ();
     }

    ); Follow chained principle return
    This.each (function () {});
   };}
(JQuery);

Lightweight, because the amount of code is really small and simple. Added a note I believe that we can read.

The model in the settings is used to control the switching mode:

• When for "click", click Realization Switch;
• When you are "mouseover", the mouse slides into the implementation switch.
  

The beginning is to use hover to implement mouse sliding into the switch, the results found that hover does not support bind binding. Because hover is the product of jquery by encapsulating the MouseOver event, it is not an authentic event and therefore cannot be bound.
Here's a demo:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  

The effect chart is as follows:

I hope this article will help you learn about the jquery program.