一个简单的超链接控制div的js

最新推荐文章于 2018-10-19 14:10:00 发布

jinxinzhang

最新推荐文章于 2018-10-19 14:10:00 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

文章标签： div stylesheet html

本文链接：https://blog.youkuaiyun.com/jinxinzhang/article/details/2961296

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现两个div元素的显示与隐藏切换功能。通过点击链接来控制div的显示状态，初始状态下仅显示div1，div2默认为隐藏状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>div.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript">
var original ="div1";
function showDiv(id){
if(original){
   document.getElementById(original).style.display="none";
}
document.getElementById(id).style.display="block";
original = id;
}
</script>
<body>
   <a href="#" onclick="showDiv('div1');">显示div1</a>
<a href="#" onclick="showDiv('div2');">显示div2</a>
<div id="div1">
DIV1的内容
</div>
<div id="div2" style="display:none;">
DIV2的内容
</div>
</body>
</html>