javascript+CSS实现Tab效果

最新推荐文章于 2023-09-15 10:06:35 发布

iteye_17749

最新推荐文章于 2023-09-15 10:06:35 发布

阅读量110

点赞数

分类专栏： CSS 文章标签： CSS JavaScript XHTML HTML ViewUI

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用Javascript和CSS来实现选项卡特效：

代码如下：
[quote]<!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=gb2312" />
<title>tabdemo</title>
<style type="text/css">
body{
font-family:"Courier New", Courier, monospace;
text-align:center
}

#tabDIV{
border:solid 1px #0099FF;
width:500px;
font-family:"Courier New", Courier, monospace 12px;
line-height:25px;
text-align:left;
}

#tabHead{
font:bold;
display:block;
background-color:#CCCCCC;
}

.curTab{
padding-left:2em;
color:#0099FF;
float:left;
overflow:hidden;
}

.otherTab{
}

a{
text-decoration:none;
font-size:12px
}

a:hover{
text-decoration:underline;
font-size:12px
}
</style>

<script type="text/javascript">
function showTab(tabid){
var tabDiv = document.getElementById("tabDIV");
var taContents = tabDiv.childNodes;
for(var i=0; i<taContents.length; i++)
{
if(taContents[i].id!=null && taContents[i].id != 'tabHead')
{
taContents[i].style.display = "none";
}
}
document.getElementById(tabid).style.display="block";
}
</script>
</head>

<body>
<h1 align="center">Javascript+CSS TabDemo</h1>
<div id="tabDIV">
<div id="tabHead">
<a href="javascript:showTab('Content1')">EngList</a>
<a href="javascript:showTab('Content2')">中文 </a>
</div>
<div id="Content1" style="display:none">
<p style="padding-left:5em">
hello javaworld</br>
hello javaeye<br/>
</p>
</div>
<div id="Content2" style="display:none">
<p style="padding-left:5em">
你好！javaworld</br>
你好! javaeye<br/>
</p>
</div>

</div>

</body>
</html>
[/quote]