动态选项卡特效

最新推荐文章于 2024-06-02 16:43:03 发布

幸福的小木鱼

最新推荐文章于 2024-06-02 16:43:03 发布

阅读量407

点赞数

分类专栏： CSS 文章标签：体育娱乐 html function

本文链接：https://blog.csdn.net/lin_lujian/article/details/6951978

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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 οnlοad="init();">
		<span id="sp1" οnclick="doCik('d1')">新闻</span> |
		<span id="sp2" οnclick="doCik('d2')">体育</span> |
		<span id="sp3" οnclick="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>

幸福的小木鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态选项卡特效

Untitled Document div{ width: 400px; height: 300px; border:1px solid red; position:absolute; padding-top:20px; } function init() { document.getEle
复制链接

扫一扫

专栏目录