Tip: you can modify some code before running
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Simple and practical Native javascript tab menu</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">Ul, li {margin: 0; padding: 0; overflow: hidden; list-style: none; font-family: "Lucida Console", Monaco, monospace ;} # tab {width: 300px; height: 25px; border: 1px solid # ddd ;}# tab li {width: 75px; height: 25px; line-height: 26px; text-align: center; float: left; cursor: pointer;} # tab li. curr {background: # eee ;}# con {width: 300px; border: 1px solid # ddd; margin-top:-1px ;}# con li {display: none; width: 280px; height: 100px; padding: 10px ;}</style></head><body><!--把下面代码加到<body>与</body>之间--><div id="tab"><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><div id="con"><ul><li>A</li><li>B</li><li>C</li><li>D</li></ul></div><script type="text/javascript">/* Tab function: cmd: click element set con: Display container set evt: trigger event css: index: email: kingark@163.com */(function (t) {window [t] = function (cmd, con, evt, css, index) {// Default trigger event var evt = evt | 'mouseover', // Default style name css = css | 'curr', index = index | 0; // initialize the display item show (index); // bind the event to the click element for (var I = 0, l = cmd. length; I <l; I ++) {// use a closure to pass the value (function (n) for accurately obtaining the I value) {cmd [n] ['on' + evt] = function () {// switch to show (n) ;}) (I );}; // switch the display function show (I) {cmd [index]. className = cmd [index]. className. replace (css, ''); con [index]. style. display = 'none'; index = I; cmd [index]. className + = css; con [index]. style. display = 'block' ;}}// specify the name of the Tab function}) ('Tab '); function tag (I, t) {return document. getElementById (I ). getElementsByTagName (t) ;}; // call the Tab function tab (tag ('Tab ', 'Lil'), tag ('con', 'Lil'), 'click ', '', 1 );</script></body></html></td> </tr></table>
Tip: you can modify some code before running
