选项卡代码

wintershan

浏览: 195358 次
性别:
来自: 北京

最近访客更多访客>>

u012363178

la_la_za

jiajian_22

niulanshan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

好好学习天天向上

CSS JavaScript XHTML HTML

关于选项卡的代码太多太多，但是很多都过于复杂，最近在老公的帮助下整出了一个较为精简的，发布上来与大家分享。

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">
<!--
.caption { height:26px; color:#188101; background:url(../images/captionbj.gif) no-repeat right 0; font-weight:bold; font-size:14px; }
.caption ul {
 height:24px; background:url(../images/captionL.gif) no-repeat 0 0; padding:2px 2px 0 10px; float:left;
}
.caption LI {
 float:left; height:24px; margin-right:5px; width:72px;text-align:center;
 line-height:17px; 

}
.caption LI A {
 text-decoration:none;
}
.classBefore ,.classCurrent { cursor:pointer; }
.caption LI.classCurrent{
 padding:4px 4px 0 ; background:url(../images/current.gif) no-repeat; filter:none;
}
.content_right { border:1px solid #CAE99B; border-top:none; height:110px; padding:15px 0!important; padding:23px 0 15px; margin:0!important; margin:-8px 0 0 }
-->
</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的，这个懒偷不了。

分享到：

能够根据屏幕分辨率自动调用不同CSS的JS代 ... | flash对联广告代码

2009-01-09 11:41
浏览 1591
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

选项卡代码

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

选项卡代码

评论

发表评论

相关推荐

如何解决ps导出jpg或png文件过大的问题

在线loading图标生成网站

备忘录

好设计的20条金律

转：5个设计师应该去的优质设计分享平台 [复制链接]

转一个关于英文自动断行问题的贴子

22个实用的在线配色网站

ie6png透明

div层遮盖flash(兼容浏览器)

(转)75个最佳Web设计资源，强烈推荐！

CSS实现自动等比例缩略图的方法

针对Google Chrome谷歌浏览器的CSS hack

解决不同浏览器窗口大小是否显示某DIV问题

图片在DIV中居中

设定网页最小最大宽度和高度（兼容IE6）

您需要了解的DIVCSS网页布局的8条面试题目

转来的总结CSS规范

如何用css实现圆角_CSS实现圆角解决方案(转）

网页设计的3D元素运用25例

5种在设计中应用光线和阴影的简单技法 [转]

最近访客更多访客>>