使用javascript怎么弄成点击div1的时候显示然后点击其他div的时候隐藏？
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#div1{width:100%;height:50px; border:1px solid #000; background:#ff9;}
.class1{width:100%; background:#99f; border:1px solid #999; display:-none;}
</style>
</head>
<body>
<div id="div1">
<div class="class1">点击显示，再点击其他隐藏</div>
</div>
<div id="div1">
<div class="class1">点击显示，再点击其他隐藏</div>
</div>
<div id="div1">
<div class="class1">点击显示，再点击其他隐藏</div>
</div>
<div id="div1">
<div class="class1">点击显示，再点击其他隐藏</div>
</div>
<div id="div1">
<div class="class1">点击显示，再点击其他隐藏</div>
</div>
</body>
</html>
你好，请采纳我下面的回答，谢谢！
关于你的问题“使用javascript怎么弄成点击div1的时候显示然后点击其他div的时候隐藏？”
我随手写了个简单的tab选项，你可以参考下。代码如下：
<!doctype html><html lang="zh">
<head>
<meta charset="utf-8">
<title>js选项卡</title>
<style>
body {
font-family: '微软雅黑';
font-size: 14px;
}
ul, ol {
list-style: none;
margin: 0;
padding: 0;
}
#tab_nav {
display: table;
}
#tab_nav li {
border-radius: 2px;
}
.tab_nav_li {
background-color: #FFB56A;
}
#tab_block {
width: 436px;
height: 160px;
background: #fbfbfb;
border: 1px solid #CCC;
margin-top: 10px;
border-radius: 2px;
}
#tab_block div {
display: none;
}
li {
width: 100px;
height: 40px;
border-bottom: 1px solid #CCC;
border-right: 2px solid #CCC;
background: #fbfbfb;
float: left;
margin-right: 10px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
</style>
<script>
window.onload=function ()
{
var oli=document.getElementsByTagName('li');//获取tab_nav所有li元素
var otab=document.getElementById('tab_block');//获取tab_block的id元素
var oblock=otab.getElementsByTagName('div');//获取tab_block下的所有div元素
//for循环tab_nav
for(var i=0;i<oli.length;i++)//获取li元素
{
oli[i].index=i;//通过js向每个li元素添加index
oli[i].onclick=function ()
{
for(var i=0;i<oli.length;i++)
{
oli[i].className='';//清除所有li的class的值
oblock[i].style.display='none';//将所有tab_block的dispaly改成none
};
this.className='tab_nav_li';//当用户发生事件时添加css的class属性tab_nav_li
oblock[this.index].style.display='block';
};
};
};
</script>
</head>
<body>
<div id="tab_nav">
<ul>
<li class="tab_nav_li">选项卡一</li>
<li>选项卡二</li>
<li>选项卡三</li>
<li>选项卡四</li>
</ul>
</div>
<div id="tab_block">
<div style="display: block;">块级元素一</div>
<div>块级元素二</div>
<div>块级元素三</div>
<div>块级元素四</div>
</div>
</body>
</html>
你先参考下，不清楚的可以给我私信或者继续追问。
请采纳吧！
代码过长，粘贴不了，麻烦您看看！我的这个代码有问题吗？为什么浏览器不报错，onclick也没回应！
你代码中有几处我觉得有疑惑，具体也得看全部的代码才知道。
疑惑一：
var aBox = getByClass( oDiv, 'more_manu' )上面这句代码中getByClass应该是获取某个目标id为“oDiv”下后代元素中class为“more_manu”的元素，以数组的方式返回。你其中的命名有没有错呢？more_manu - > more_menu。
疑惑二：
oDiv[j].onclick = function () {在这行按照你的思路是遍历数组元素。但是在这里j是没有任何值。你可以换成0，1类似的下标试试。如果正确你在改写遍历。
追问我根据您发的例子，试过您的思路，只是到了我代码那里不生效。不懂为什么。疑惑一没错的，只是个传参而已，我测试过。应该是循环出了问题，但是我想不出解决办法，所以只能求助了，我想把获取到的id做个循环，然后id下面的class也做个循环，然后点击id时为display:block，点击其他的id的时候display为none同时把其他display变为空。这样说不知道您明不明白
追答我写了个简单的代码，我不知道是不是你要描述的意思，你描述的我还是没有弄清楚。
我只能凭着我的理解写了个代码，你点击附件下载，查看完整版本。因字数限制我下面只附上js代码。
javascript部分
<script>window.onload = function () {
oClick();
}
function oClick () {
//在html中的li元素和div是一对一想对应；
var oWrap = document.getElementById('wrap');
var oAllLi = oWrap.getElementsByTagName('li'); //获取所有li
var oAllDiv = oWrap.getElementsByTagName('div'); //获取所有div
for( var i =0; i<oAllDiv.length; i++ ) {
oAllLi[i].index = i;
oAllLi[i].onclick = function () {
var index = this.index;
for( var i =0; i<oAllDiv.length; i++ ) {
oAllDiv[i].style.display = 'none';
}
oAllDiv[index].style.display = 'block';
}
}
}
</script>
