选项卡代码

wintershan · 发表于 2013-2-7 19:06:17

关于选项卡的代码太多太多，但是很多都过于复杂，最近在老公的帮助下整出了一个较为精简的，发布上来与大家分享。
window.onload=function(){var dl1=document.getElementById("fra_head_ft_1");var dl2=document.getElementById("fra_head_ft_2");dl1.onclick=function(){var dc1=document.getElementById("fra_ft_1");var dc2=document.getElementById("fra_ft_2");if(this.className=='classBefore'){this.className ="classCurrent";dl2.className ="classBefore";dc1.style.display="inline";dc2.style.display="none";}};dl2.onclick=function(){if(this.className=='classBefore'){var dc1=document.getElementById("fra_ft_1");var dc2=document.getElementById("fra_ft_2");this.className ="classCurrent";dl1.className ="classBefore";dc2.style.display="inline";dc1.style.display="none";}};};
<!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>无标题文档</title><style type="text/css"></style><script language="javascript" src="js/login.js"></script></head><body><div class="caption"> <ul> <li class="classCurrent" id="fra_head_ft_1"><span>网站</span></li> <li class="classBefore" id="fra_head_ft_2"><span>邮箱</span></li> </ul></div><div class="content_right frame"> <div style="display: inline;" id="fra_ft_1"> 第一个 </div> <div style="display: none;" id="fra_ft_2"> 第二个 </div></div></body></html> 这里的CSS只针对重要的DIV设定了属性，用到具体的地方还得因地制宜为DIV添加CSS的，这个懒偷不了。

		自动登录	找回密码
密码			立即注册

选项卡代码

浏览过的版块