使用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>
展开
 我来答
贵阳小木子
推荐于2016-07-20 · TA获得超过117个赞
知道答主
回答量:32
采纳率:0%
帮助的人:49.7万
展开全部

你好,请采纳我下面的回答,谢谢!

关于你的问题“使用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类似的下标试试。如果正确你在改写遍历。

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式