henry1451 的专栏
posts - 60,comments - 71,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 2008-06-10 16:32 henry1451 阅读(336) 评论(0)  编辑  收藏 所属分类: Jsp,Js,Ajax,Html技术

只有注册用户登录后才能发表评论。
网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问  
 
Copyright ©2024 henry1451 Powered By博客园 模板提供：沪江博客