posts - 42,  comments - 84,  trackbacks - 0
类似163的新闻版块切换功能的JS实现
<head>
<title>无标题文档</title>
<style type="text/css">
<!--

.hidecontent {display:none;}
-->
</style>
<script language="javascript">
function switchTag(content)
{
// alert(tag);
// alert(content);
for(i=1; i <6; i++)
{

if ("content"+i==content)
{
document.getElementById(content).className="";
}else{
document.getElementById("content"+i).className="hidecontent";
}
document.getElementById("content").className=content;
}
}
</script>
</head>

<body>
<div id="container">
<ul>
<li><a href="#" onmouseover="switchTag('content1');this.blur();"><span>标题一</span></a></li>
<li><a href="#" onmouseover="switchTag('content2');this.blur();"><span>标题二</span></a></li>
<li><a href="#" onmouseover="switchTag('content3');this.blur();"><span>标题三</span></a></li>
<li><a href="#" onmouseover="switchTag('content4');this.blur();"><span>标题四</span></a></li>
<li><a href="#" onmouseover="switchTag('content5');this.blur();"><span>标题五</span></a></li>
</ul>
</div>
<div id="content" class="content1">

<div id="content1" >标题一中的东西</div>
<div id="content2" class="hidecontent">标题二中的东西</div>
<div id="content3" class="hidecontent">标题三中的东西</div>
<div id="content4" class="hidecontent">标题四中的东西</div>
<div id="content5" class="hidecontent">标题五中的东西</div>

</div>
</body>
</html>
只是一个简单的实现方法，具体的样式美观方面的东西可以自己修改。
posted on 2007-11-11 11:39 Dong 阅读(1511) 评论(4)  编辑  收藏

只有注册用户登录后才能发表评论。
网站导航:
 
Powered by:
BlogJava
Copyright ©2024 Dong