This example describes how jquery implements the Tab tab effect. Share to everyone for your reference. Specifically as follows:
var tabs = {
init:function () {
var $tab _contents=$ ('. tab-contents '), $tab _nav=$ ('. Tab-nav ');
$tab _contents.find ('. Tab-content:not (: a) '). Hide ();
$tab _nav.find (' Li:first '). addclass (' active ');
$tab _nav.on (' Click ', ' Li a ', function (e) {
e.preventdefault ();
var $this =$ (this), the activetab=this.hash,parent= $this. Parents (' section '), $contents =$ (parent, $tab _contents);
$ (parent, $tab _nav). Find (' Li '). Removeclass (' active ');
$this. Parent (). addclass (' active ');
$contents. Find ('. Tab-content '). Hide ();
$contents. Find (Activetab). FadeIn ();}
);
}; $ (document). Ready (Tabs.init ());
The HTML section is as follows:
I hope this article will help you with your jquery programming.