使用javascript怎么弄成点击div1的时候显示然后点击其他div的时候隐藏？
<html><head><title></title><metacharset="utf-8"/><style>#div1{width:100%;height:50px;...
<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> 展开
<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> 展开
1个回答
展开全部
你好，请采纳我下面的回答，谢谢！
关于你的问题“使用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类似的下标试试。如果正确你在改写遍历。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
