javaScript实现在一个页面中对某一部分的切换

最新推荐文章于 2025-07-01 09:10:11 发布

原创最新推荐文章于 2025-07-01 09:10:11 发布 · 1w 阅读

32 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的JavaScript页面切换效果实现方案。通过点击不同的导航项，可以显示对应的页面内容区域，同时隐藏其他内容。该方案使用纯JavaScript编写，不依赖任何框架。

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

<span style="font-size:14px;">用javaScript实现在一个页面中对某一部分的切换（点击哪里就显示对应的内容），只是举例的效果，
页面简单但是也能够起到说明效果。
下面看一下html代码：</span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<script>
window.onload=function(){
var ocontent=document.getElementById("content");
var oli=ocontent.getElementsByTagName("li");
var odiv=ocontent.getElementsByTagName("div");

for(var i=0;i<oli.length;i++){
oli[i].index=i; //对当前li进行编号
oli[i].onclick=function(){
for(var n=0;n<oli.length;n++){
oli[n].className="";
odiv[n].className="hide";
}
this.className="on";
odiv[this.index].className="";

}
}
}
</script>
<div class="main">

<div class="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id="content">
<ul>
<li class="on">case1</li>
<li>case2</li>
<li>case3</li>
<li>case4</li>
</ul>
<div class="">
<span id="hello">hello world</span>
</div>
<div class="hide">
<span id="hello1">hello world1</span>
</div>
<div class="hide">
<span id="hello2">hello world2</span>
</div>
<div class="hide">
<span id="hello3">hello world3</span>
</div>
</div>

</div>

</body>

</html>

下面是css代码：

*{
padding:0;
margin:0;
font-size:12px;

}
.main{
margin:20px 200px;
}
.nav ul{
margin-left:100px;
}
.nav ul li{
list-style:none;
width:100px;
height:30px;
float:left;
margin-left:20px;
background:#c8c8c8;
text-align:center;
line-height:30px;
margin-left:10px;
}
#content ul{
list-style:none;
display:block;
height:30px;
line-height:30px;
}
#content ul li{
margin:2px;
text-align:center;
line-height:30px;
clear:both;
display:block-inline;
width:100px;
height:30px;
background:red;
font-family:"微软雅黑";
font-size:16px;
list-style:none;
cursor:pointer;
}
#content ul li .on{
display:block;
}
#content div{
margin-left:120px;
}

.hide{display:none;}


</span>

实现的效果：

最开始的时候将case1对应的div里面的内容为hello world 并且对应的class="";而其他(case2\case3\case4)
只是将li对应的div的class设定为了"hide"，我们用了css对class="hide"的div实现了隐藏即（display="none"）,
当我们鼠标点击一下case2就会触发onclick事件实现对case1对应div的隐藏，case2对应div的显示，以此类推。

注意：

<span style="font-size:14px;">var ocontent=document.getElementById("content");
var oli=ocontent.getElementsByTagName("li");
var odiv=ocontent.getElementsByTagName("div");</span>

中的的黑体部分即（ocontent），一定要分清楚是document还是ocontent，document对页面中所有（根据后面的get......）的全部输出;所以在这里故意加了<ul><li>1</li><li>2</li><li>3</li><li>4</li>

<span style="font-size:14px;">如果你是写的是
</span>

<span style="font-size:14px;">document.getElementsByTagName("li");</span>

那么这里的1、2、3、4也能实现点击一下进行隐藏，因为你控制的是所有的li，但是不能实现点击以后对另外一个模块的显示
而ocontent是对这个下面的输出，当然还是要根据（get......）后面对应的id，class，div，li......，这里的li，能够实现：

<span style="font-size:14px;">点击哪里就显示对应的内容。</span>