Question

js语法逻辑

<style>

#box1{ height:300px; width:300px; background-color:#FF0; display:block;}
#box2{
height: 300px;
width: 300px;
background-color: #993;
display:block;
}

.bnt1 {height:100px; width:200px; background-color:#F96
}
.bnt2 {height:100px; width:200px; background-color:#C36
}
.bnt3 {height:100px; width:200px; background-color:#09C
}
</style>

<div id="box1">

<div class="bnt1">
<p>bnt1：点击bnt1则Box2样式变成： display:block; 则Box1样式变成：display:none;（求js语法）</p>
<p>---box1显示则box2隐藏</p>
<p>---box2显示则box1隐藏</p>
</div>
<div class="bnt2">bnt2</div>
<div class="bnt3"></div>

</div>

<div id="box2">

<div class="bnt1">bnt1</div>

<div class="bnt2">bnt2 ，点击bnt2则显示Box1</div>

<div class="bnt3">bnt3</div>

</div>
单靠鼠标移入移除怎么完成
DIV内的元素触发另外一个DIV的事件 ，求思路，

由DIV1内的一个元素来触发 DIV2的样式
由DIV2内的一个元素来触发 DIV1的样式

Answer 1

如果要实现鼠标点击来触发，可以如下步骤：

1. 在box1里面的子标签<div class="bnt1">加上 onclick="Show('box1','box2');"

   如：<div class="bnt1" onclick="Show('box1','box2');">

2. 在box2里面的子标签<div class=“bnt2”>加上 onclick="Show('box2','box1');"

   Show()里面的参数注意和步骤1的区别

   如：<div class=“bnt2” onclick="Show('box2','box1');">
   

3. 在最下面加上如下JS代码：

   <script>

   function Show(t,v){

       document.getElementById(t).style.display = "none";

       document.getElementById(v).style.display = "block";

   }

   </script>

4. 完成

另外，如果要实现鼠标移入移出触发，只用把步骤1和步骤2里的“onclick”换成“onmouseover”就可以了

如：<div class="bnt1" onmouseover="Show('box1','box2');">

       <div class=“bnt2” onmouseover="Show('box2','box1');">

希望对你有帮助

Answer 2

就这几句，你有一点编程基础的话，相信你自己能拼凑出来

var div1 = document.getElementById("box1");
var div2 = document.getElementById("box2");

div1.onmouseover = 函数1;
div2.onmouseover = 函数2;

function 函数1 (){
some code..

}

function 函数2 (){
some code..

}

div2.style.display = "block";
div1.style.display = "none";