可以切换的JS标题内容

<html>
<head>
<script language="javascript">
function doClick_inin(o)
{ var id ;
var e;
for(var i=0; i<=3;i++){id="inin"+i; e=document.getElementById

("Album_"+i);
if(id!=o.id){e.style.display="none"}else{e.style.display="block";}}}

</script>
<style type="text/css">
.containter{ width:1024px; hight:768px; margin:0 auto;}
.title{width:200x; hight:50px;float:left; border:#5bb7d4 solid 1px;

padding:1px;/*_margin-right:-8px;*/ overflow:hidden; }
.title li{width:85px; height:25px; line-height:25px; float:left; text-

align:center; display:block;}
.content{width:400px; hight:300px; }
.AlbumContent{display:none;}
#AlbumIsGood { width:764px; height:218px; float:left; border:#5bb7d4 solid

1px; padding:1px;/*_margin-right:-8px;*/ overflow:hidden;}
.AlbumTitle{ width:744px; line-height:25px; height:25px; padding:0px 10px;

background:url(../images/titleb.gif) repeat-x 0px -3px; font-size:14px;

font-weight:bold; color:#3AA7CB;}
.AlbumTitle li{ width:85px; height:25px; line-height:25px; float:left;

text-align:center; display:block;}
.AlbumTitle a{ width:85px; height:25px; line-height:25px; float:left; text

-align:center; display:block;}
.AlbumTitle a:hover { background:url(../images/indexico.gif) no-repeat -

380px 0px; color:#3AA7CB;}
</style>
</head>
<body>
<div class="containter" >
<div id="AlbumIsGood">
<div class="AlbumTitle">
<ul>
<li><a href="#" onmouseover="javascript:doClick_inin(this)" id="inin0">最

新上传专辑</a></li>
<li><a href="#" onmouseover="javascript:doClick_inin(this)" id="inin1">华

人专辑</a></li>
<li><a href="#" onmouseover="javascript:doClick_inin(this)" id="inin2">欧

美专辑</a></li>
<li><a href="#" onmouseover="javascript:doClick_inin(this)" id="inin3">日

韩专辑</a></li>
</ul>
</div>
<div class="AlbumContent" id="Album_0" style="display:block;">我是一

</div>

<div class="AlbumContent" id="Album_1">我是二

</div>

<div class="AlbumContent" id="Album_2">我是三

</div>

<div class="AlbumContent" id="Album_3">我是四

</asp:Repeater>
</div>

</div>

</html>

// 主要的还是调用 function doClick_inin(o)
{ var id ;
var e;
for(var i=0; i<=3;i++){id="inin"+i; e=document.getElementById

("Album_"+i);
if(id!=o.id){e.style.display="none"}else{e.style.display="block";}}} 实现鼠标上移触发内容层之间的切换，

posted @ 2008-12-27 14:21 张立余阅读(384) 评论(0) 收藏举报

刷新页面返回顶部