JQuery simple tab switching implementation method, jquerytab switching implementation

JQuery simple tab switching implementation method, jquerytab switching implementation

This document describes how to implement jQuery simple tab switching. Share it with you for your reference. The details are as follows:

<Script src = "js/jquery-latest.js"> </script> <SCRIPT language = javascript type = text/javascript> $ (document ). ready (function () {$ ('. tabtitle li '). click (function () {var index = $ (this ). index (); $ (this ). attr ('class', "tabhover "). siblings ('lil '). attr ('class', 'taba'); $ ('. tabcontent '). eq (index ). show (200 ). siblings ('. tabcontent '). hide () ;}); var t = 0; var timer = setInterval (function () {if (t = $ ('. tabtitle li '). length) t = 0; $ ('. tabtitle li: eq ('+ t + ')'). click (); t ++; }, 700 )}) </SCRIPT> <div class = "maintab"> <ul class = "tabtitle"> <li class = "tabhover"> <a href = "#"> select Title 1 </a> </li> <li class = "taba"> <a href = "#"> select Title 2 </a> </li> <li class = "taba "> <a href =" # "> select Title 3 </a> </li> <li class =" taba "> <a href =" # "> select Title 4 </a> </li> <li class = "taba"> <a href = "#"> select Title 5 </a> </li> </ul> <div class = "tabcontent"> Select Content 1 </div> <div class = "tabcontent" style = "DISPLAY: none "> select content 2 </div> <div class =" tabcontent "style =" DISPLAY: none "> select content 3 </div> <div class =" tabcontent "style =" DISPLAY: none "> select content 4 </div> <div class =" tabcontent "style =" DISPLAY: none "> Select Content 5 </div>

I hope this article will help you with jQuery programming.