请教一个div显示/隐藏问题
帮我修改下，DIV2、DIV3嵌套在DIV4中，我想把导航1内容显示在DIV2，导航2内容显示在DIV3，只同时显示一个DIV（即显示div2时隐藏div3,显示DIV3...
帮我修改下，DIV2、DIV3嵌套在DIV4中，我想把导航1内容显示在DIV2，导航2内容显示在DIV3，只同时显示一个DIV（即显示div2时隐藏div3,显示DIV3时隐藏DIV2)可能要修改JS
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
width:150px;
height:400px;
float:left;
background-color:#CCCCCC;
}
#div2{
float: right;
height: 150px;
width: 100px;
margin-right:150px;
background-color: #96C;
text-align: center;
white-space: pre;
display: block;
text-transform: capitalize;
text-decoration: overline;
margin-top:20px;
}
#div3{
float: right;
height: 150px;
width: 100px;
margin-right: 150px;
background-color: #669900;
text-align: center;
white-space: pre;
display: block;
text-transform: capitalize;
text-decoration: overline;
margin-top:20px;
}
#div4{
float: right;
height: 400px;
width: 400px;
background-color:#CCCCCC;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oto1=document.getElementById('div1');
var oto2=oto1.getElementsByTagName('li');
var oto3=document.getElementById('div2');
for(var i=0;i<oto2.length;i++){
oto2[i].index=i;
oto2[i].onclick=function(){
oto3.innerHTML=oto2[this.index].innerHTML;
}
}
}
</script>
</head>
<body>
<div id="div1">Div1
<ul>
<li><a href="#">1导航</a></li>
<li><a href="#">2导航</a></li>
</ul>
</div>
<div id="div4">Div4
<div id="div2">div2</div>
<div id="div3">div3</div>
<p>帮我修改下，DIV2、DIV3嵌套在DIV4中，我想把导航1内容显示在DIV2，导航2内容显示在DIV3，只同时显示一个DIV（即显示div2时隐藏div3,显示DIV3时隐藏DIV2)可能要修改JS</p>
</div>
</body>
</html> 展开
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{
width:150px;
height:400px;
float:left;
background-color:#CCCCCC;
}
#div2{
float: right;
height: 150px;
width: 100px;
margin-right:150px;
background-color: #96C;
text-align: center;
white-space: pre;
display: block;
text-transform: capitalize;
text-decoration: overline;
margin-top:20px;
}
#div3{
float: right;
height: 150px;
width: 100px;
margin-right: 150px;
background-color: #669900;
text-align: center;
white-space: pre;
display: block;
text-transform: capitalize;
text-decoration: overline;
margin-top:20px;
}
#div4{
float: right;
height: 400px;
width: 400px;
background-color:#CCCCCC;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oto1=document.getElementById('div1');
var oto2=oto1.getElementsByTagName('li');
var oto3=document.getElementById('div2');
for(var i=0;i<oto2.length;i++){
oto2[i].index=i;
oto2[i].onclick=function(){
oto3.innerHTML=oto2[this.index].innerHTML;
}
}
}
</script>
</head>
<body>
<div id="div1">Div1
<ul>
<li><a href="#">1导航</a></li>
<li><a href="#">2导航</a></li>
</ul>
</div>
<div id="div4">Div4
<div id="div2">div2</div>
<div id="div3">div3</div>
<p>帮我修改下，DIV2、DIV3嵌套在DIV4中，我想把导航1内容显示在DIV2，导航2内容显示在DIV3，只同时显示一个DIV（即显示div2时隐藏div3,显示DIV3时隐藏DIV2)可能要修改JS</p>
</div>
</body>
</html> 展开
1个回答
展开全部
这个就用jquery了，很方便 在你的页面里包含一个jquery的js文件，先网上下下来，放在你的一个目录下包含到页面里<script src="js文件的目录" type="text/javascript"></script> <div class="div1" style="display:none;">先设置为隐藏</div><div class="div2">这个为显示的</div>两个按钮<input type="button" name="button1" value="button1" onclick="Button1();"/><input type="button" name="button2" value="button2" onclick="Button2();"/> <script type="text/javascript">//点击button1，显示div1；反之，显示div2function Button1(){ $(".div1").show(); $(".div2").hide();} function Button2(){ $(".div1").hide(); $(".div2").show();}</script>这个是最简单的jquery运用
追问
能不能用DW打开，帮我修改下?
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
