要实现隐藏同级元素后只显示JS文件内容的方法，可以使用以下步骤进行操作：
第一步
首先，在 HTML 文件中添加一个包含 JS 代码的标签，比如 <script> 标签，可以将这个标签放在 <head> 或 <body> 中：
<!DOCTYPE html>
<html>
<head>
<title>JS实现隐藏同级元素后只显示JS文件内容的方法</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>标题</h1>
<p>这是一个段落。</p>
<div id="content">JS文件内容将在这里显示。</div>
</body>
</html>
注意，这里需要通过 src 属性引入 JS 文件，而不是在 <script> 标签内部编写 JS 代码。
第二步
接下来，在 JS 文件 (test.js) 中，编写代码来实现隐藏同级元素后只显示 JS 文件内容。具体实现方法如下：
window.onload = function() {
var content = document.getElementById("content");
var siblings = content.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
var sibling = siblings[i];
if (sibling.nodeType == 1 && sibling != content) {
sibling.style.display = "none";
}
}
content.style.display = "block";
};
代码的功能是，找到 id 为 content 的元素，将它的所有同级元素隐藏，然后将其自身显示。
示例说明
下面提供两个示例，以更好地说明如何实现隐藏同级元素后只显示 JS 文件内容。
示例一
在 HTML 文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>示例1</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>示例1 - 隐藏同级元素后只显示JS文件内容</h1>
<p>这是一个段落。</p>
<div id="content">JS文件内容将在这里显示。</div>
<p>这是另一个段落。</p>
</body>
</html>
在 JS 文件 test.js 中添加以下代码：
window.onload = function() {
var content = document.getElementById("content");
var siblings = content.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
var sibling = siblings[i];
if (sibling.nodeType == 1 && sibling != content) {
sibling.style.display = "none";
}
}
content.style.display = "block";
};
打开 HTML 文件，可以看到只有 id 为 content 的元素被显示出来。
示例二
在 HTML 文件中添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>示例2</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<h1>示例2 - 隐藏同级元素后只显示JS文件内容</h1>
<p>这是一个段落。</p>
<div class="box">这是一个盒子。</div>
<div id="content">JS文件内容将在这里显示。</div>
<p>这是另一个段落。</p>
<div class="box">这是另一个盒子。</div>
</body>
</html>
在 JS 文件 test.js 中添加以下代码：
window.onload = function() {
var content = document.getElementById("content");
var siblings = content.parentNode.childNodes;
for (var i = 0; i < siblings.length; i++) {
var sibling = siblings[i];
if (sibling.nodeType == 1 && sibling != content) {
sibling.style.display = "none";
}
}
content.style.display = "block";
};
打开 HTML 文件，可以看到只有 id 为 content 的元素被显示出来，而其他 class 为 box 的元素被隐藏了。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现隐藏同级元素后只显示JS文件内容的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 