您的位置：首页 > Web前端 > JavaScript

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

2016-09-02 08:03 316 查看 
<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
.className="";
odiv
.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>




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航