html中在导航点击一个选项,如何隐藏当前页面的conten,并更换另一个content
时间: 2023-04-02 07:03:45 浏览: 88
您可以使用JavaScript来实现这个功能。您可以为每个导航选项创建一个对应的内容区域,并为每个选项添加一个点击事件。在点击事件中,您可以使用CSS的display属性来隐藏当前内容区域,并显示所选导航选项对应的内容区域。以下是一个示例代码:
HTML代码:
<nav>
<ul>
<li><a href="#" id="option1">选项1</a></li>
<li><a href="#" id="option2">选项2</a></li>
<li><a href="#" id="option3">选项3</a></li>
</ul>
</nav>
<div id="content1">选项1的内容</div>
<div id="content2">选项2的内容</div>
<div id="content3">选项3的内容</div>
JavaScript代码:
var option1 = document.getElementById("option1");
var option2 = document.getElementById("option2");
var option3 = document.getElementById("option3");
var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
var content3 = document.getElementById("content3");
option1.addEventListener("click", function() {
content2.style.display = "none";
content3.style.display = "none";
content1.style.display = "block";
});
option2.addEventListener("click", function() {
content1.style.display = "none";
content3.style.display = "none";
content2.style.display = "block";
});
option3.addEventListener("click", function() {
content1.style.display = "none";
content2.style.display = "none";
content3.style.display = "block";
});