<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
div{
width: 400px;
height: 300px;
border:1px solid red;
position:absolute;
padding-top:20px;
}
</style>
<script>
function init() {
document.getElementById('d2').style.display = "none";
document.getElementById('d3').style.display = "none";
document.getElementById('sp1').style.color = "red";
}
function doCik(idx) {
var divArr = new Array("d1", "d2", "d3");
var spArr = new Array("sp1", "sp2", "sp3");
for(var i=0; i<divArr.length; i++) {
if (idx == divArr[i]) {
document.getElementById(divArr[i]).style.display = "block";
document.getElementById(spArr[i]).style.color = "red";
}
else {
document.getElementById(divArr[i]).style.display = "none";
document.getElementById(spArr[i]).style.color = "#000000";
}
}
}
</script>
</head>
<body onload="init();">
<span id="sp1" onclick="doCik('d1')">新闻</span> |
<span id="sp2" onclick="doCik('d2')">体育</span> |
<span id="sp3" onclick="doCik('d3')">娱乐</span> <br>
<div style="width:402px; height:322px; padding-top:0px;">
<div id="d1">新闻版内容</div>
<div id="d2">体育版内容</div>
<div id="d3">娱乐版内容</div>
</div>
</body>
</html>
动态选项卡特效
最新推荐文章于 2025-06-03 16:31:20 发布
扫一扫
1405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
