一个简单的javascript tab选项卡
<!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" lang="UTF-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>一个简单的javascript tab选项卡</title> <meta name="keyword" content="javascript tab选项卡" /><meta name="description" content="一个简单的javascript tab选项卡" /> <script type="text/javascript"> /** * @author * @copyright private * @create 23/11/2010 */ var tab = function(data){ this.data = data; } tab.prototype = { init:function(){ var $t = this; var $d = this.data; $d.t1 = $d.t1?$d.t1:'span'; $d.t2 = $d.t2?$d.t2:'ul'; $d.cur = $d.cur?$d.cur:'current'; $d.s = $d.s?$d.s:0; $d.ts1 = document.getElementById($d.id).getElementsByTagName($d.t1); $d.ts2 = document.getElementById($d.id).getElementsByTagName($d.t2); $d.ts1[$d.s].className = $d.cur; $d.ts2[$d.s].style.display = 'block'; for(var i = 0; i < $d.ts1.length; i++){ $d.ts1[i].onmouseover = (function(i,$d){ return function(){ $d.ts2[$d.s].style.display = 'none';//隐藏前面显示的内容 $d.ts1[$d.s].className = '';//设置之前选中类为null $d.s = i;//将当前选中索引值负值给$d.s this.className = $d.cur;//设置当前选中样式 $d.ts2[i].style.display = 'block';//显示当前选中项对应的内容 } })(i,$d) } } } </script> <style type="text/css"> *{margin:0;padding:0;list-style:none} body{padding:10px;font-size:12px;} .tab{width:520px;background:#fff;margin-bottom:10px;} .tab span{float:left;height:20px;line-height:20px;width:78px;border:1px solid #aeaeae;border-bottom:none;margin:0 5px 0 0;text-align:center;cursor:pointer;} .tab span.current{position:relative;margin-bottom:-1px;background:#fff;height:21px;} .tab ul{clear:both;border:1px solid #aeaeae;padding:5px;display:none;} </style> </script></head> <body> <div id="tab" class="tab"> <span>选项A</span> <span>选项B</span> <span>选项C</span> <span>选项D</span> <span>选项E</span> <span>选项F</span> <ul><li>切换吧切换吧a</li></ul> <ul><li>切换吧切换吧b</li></ul> <ul><li>切换吧切换吧C</li></ul> <ul><li>切换吧切换吧D</li></ul> <ul><li>切换吧切换吧E</li></ul> <ul><li>切换吧切换吧F</li></ul> </div> <script type="text/javascript"> var tab1 = new tab({id:'tab',s:5}); tab1.init() var tab = new tab({id:'tab1',s:5}); tab.init() </script> </body></html>