87,901
社区成员
发帖
与我相关
我的任务
分享
<!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>
<script>
var h = document.getElementById("tab").getElementByTagName("h3");
var d = document.getElementById("tab").getElementByTagName("div");
function go_to(ao)
{
for(var i=0; i<h.length;i++)
{
if(ao-1==i)
{
d[i].className+="block";
}
}
}
</script>
<style>
/* body部分 */
.bodv_div { width:1000px; background-color:#F99; margin:0 auto;}
.first_div{}
.language_title { width:1000px; height:20px; background-color: #39F}
#tab { width:1000px; height:100px; background-color:#FF3}
#tab h3{float:left; width:120px; height:26px; line-height:26px; margin:0; font-size:12px; cursor:pointer; text-align:center; color:red; background-color:#CCC}
#tab div{display:none;}
#tab .block{display:block;}
#tab div{ height:60px; width:1000px; background-color:#FC9; clear:both}
</style>
</head>
<body>
<!-- head部分 -->
<!-- body部分 -->
<div class="bodv_div">
<div class="language_title">网页编程</div>
<!-- body 内容显示部分 -->
<div id="tab">
<h3 onclick="go_to(1)">选择一
</h3>
<h3 onclick="go_to(2)">选择二
</h3>
<h3 onclick="go_to(3)">选择三
</h3>
<div class="block">
aaaaaaaaaaaaaaa
</div>
<div>
bbbbbbbbbbb
</div>
<div>
ccccccccccccccc
</div>
</div>
</div>
<!-- body部分 -->
</body>
</html>
<!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>dfsdf</title>
<script>
function go_to(ao)
{
var d = document.getElementById("tab").getElementsByTagName("div");
var h=d.length;
for(var i=0; i<h;i++)
{
if(ao-1==i)
{
d[i].style.display="block";
}
else{
d[i].style.display="none";
}
}
}
</script>
<style>
/* body */
.bodv_div { width:1000px; background-color:#F99; margin:0 auto;}
.first_div{}
.language_title { width:1000px; height:20px; background-color: #39F}
#tab { width:1000px; height:100px; background-color:#FF3}
#tab h3{float:left; width:120px; height:26px; line-height:26px; margin:0; font-size:12px; cursor:pointer; text-align:center; color:red; background-color:#CCC}
#tab div{display:none;}
#tab .block1{display:block;}
#tab div{ height:60px; width:1000px; background-color:#FC9; clear:both}
</style>
</head>
<body>
<!-- head -->
<!-- body -->
<div class="bodv_div">
<div class="language_title">ҳ</div>
<!-- body ʾ -->
<div id="tab">
<h3 onclick="go_to(1)">tab_1
</h3>
<h3 onclick="go_to(2)">tab_2
</h3>
<h3 onclick="go_to(3)">tab_3
</h3>
<div class="block1">
aaaaaaaaaaaaaaa
</div>
<div class="block2">
bbbbbbbbbbb
</div>
<div class="block3">
ccccccccccccccc
</div>
</div>
</div>
<!-- body -->
</body>
</html>
我觉得你这样写会好点,你用js源生代码写classname这个是无法实现的,改用jquery来写就可以,但是如果只是写这个功能的话,用我上边的方法还是挺简单可用的!