原生JS选项卡切换

以前模拟新浪做过一个简单版的tab切换，这回增强一下，选项不采用常规的ul,li结构，更加语义化。此切换可以自己指定默认显示哪个Tab，兼顾JS被禁止情况下的页面效果，算是自己对渐进增强的一点点理解。

<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS选项卡切换</title> <style> body{font:12px/1.5 Tahoma,Helvetica,Arial,sans-serif} #wrapper{margin:0 auto;width:400px;height:auto;border:1px #333 solid;position:relative;overflow:auto/*clear floats*/} .box{margin:0;padding:0;clear:both} ul{margin:0;width:100%;padding:0;float:left;background:#ccc; list-style:circle;list-style-position:inside} ul.json{margin:24px 0 0 0} #wrapper h3{height:24px;line-height:24px;margin:0;width:85px; display:inline-block;padding:0 0 0 15px} #wrapper h3.json{position:absolute;top:0;cursor:pointer} #wrapper h3.on{background:#0099FF} #wrapper #box1 h3.json{left:0} #wrapper #box2 h3.json{left:100px} #wrapper #box3 h3.json{left:200px} #wrapper #box4 h3.json{left:300px} </style> </head> <body> <div id="wrapper"> <div class="box" id="box1"> <h3>title 1</h3> <ul> <li>content1</li> <li>content1</li> <li>content1</li> <li>content1</li> <li>content1</li> <li>content1</li> <li>content1</li> </ul> </div> <div class="box" id="box2"> <h3>title 2</h3> <ul> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> <li>content2</li> </ul> </div> <div class="box" id="box3"> <h3>title 3</h3> <ul> <li>content3</li> <li>content3</li> <li>content3</li> <li>content3</li> <li>content3</li> <li>content3</li> <li>content3</li> </ul> </div> <div class="box" id="box4"> <h3>title 4</h3> <ul> <li>content4</li> <li>content4</li> <li>content4</li> <li>content4</li> <li>content4</li> <li>content4</li> </ul> </div> </div> <script type="text/javascript"> window.onload=tabs; var Item = 4;//设置默认显示第几个Tab function addClass(element,value) { if (!element.className) { element.className = value; } else { element.className+= " "; element.className+= value; } } function tabs(){ var h3s = document.getElementsByTagName("h3"); /*将默认显示的tab高亮*/ addClass(h3s[Item-1],"on"); var uls = document.getElementsByTagName("ul"); for(var i=0;i<uls.length;i++) { //将所有ul切换到JS支持状态下 uls[i].className = "json"; //将默认显示的Tab对应的内容显示 if(i==Item-1) uls[Item-1].style.display = ""; //将其他的Tab对应的内容隐藏 else uls[i].style.display = "none"; } for(var i=0;i<h3s.length;i++) { //将所有h3切换到JS支持状态下 addClass(h3s[i]," json"); //点击选项卡时进行切换 h3s[i].onclick= function(){setTab(this);} } } function setTab(whichtab) { //获取当前鼠标点击标题时外层DIV对应的ID var boxid = whichtab.parentNode.getAttribute("id"); //截取ID最后一个数值 var id=boxid.substr(boxid.length-1,1); currentItem = Item; //如果鼠标不是划过默认显示的Tab，才进行下一步的隐藏和切 if (id!= currentItem) { var defaultBox=document.getElementById("box"+currentItem); //隐藏当前显示的Tab对应的内容 defaultBox.getElementsByTagName("ul")[0].style.display = "none"; //将当前显示的Tab切换到非高亮状态 defaultBox.getElementsByTagName("h3")[0].className = "json"; } var currentBox = document.getElementById("box"+id); //显示目标Tab对应的内容 currentBox.getElementsByTagName("ul")[0].style.display = ""; //将目标Tab切换到高亮状 addClass(currentBox.getElementsByTagName("h3")[0]," on"); //Tab切换完成 Item = id;//将当前Tab的数值存储到变量以供下一次调用 } </script> </body></html>

Tips:You can change the code before run.

Written on 2009-03-12 19:17:28 下午 under 前端开发 with 7 Comments and 1,559 Views

7 Comments

Post a Comment