Javascript css显示：无

我正在努力做到以下几点：

• 我有6个分区。每个分区内都有另一个分区显示：无

我想在jQuery中这样做，当我单击每个div时，所有6个div都会更改为显示：none，并且单击div中的div会显示在屏幕上

检查这把小提琴

唯一会发生的事情就是：没有

我能做什么？我也尝试过“显示”和“隐藏”，但都不起作用

提前谢谢你

试试这样的东西：

//HTML：
框1一些文本和img

框2一些文本和img

框3一些文本和img

框4一些文本和img

框5一些文本和img

//CSS:
div{
显示：内联；
}
#框1{边框：1px实心；}
#框2{边框：1px实心；}
#box3{边框：1px实心；}
#框4{边框：1px实心；}
#框5{边框：1px实心；}
//JS:
$（函数（）{
$（“#框1”）。单击（函数（）{
$（this.css（“display”，”）；
//$（“#box1”）.css（“显示”、“无”）；
$（“#box2”）.css（“显示”、“无”）；
$（“#box3”）.css（“显示”、“无”）；
$（“#box4”）.css（“显示”、“无”）；
$（“#box5”）.css（“显示”、“无”）；
});
});

很高兴你得到了上面的答案@佐尔坦的方法似乎对你有用。我也会考虑将类添加到div中，因为它会减少jQuery和css。

<div class="outerDiv" id="box1">Box1</div>
<div id="cont1" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box2">Box2</div>
<div id="cont2" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box3">Box3</div>
<div id="cont3" class="innerDiv" style="display:none"><p>Some text and img</p></div>    
<div class="outerDiv" id="box4">Box4</div>
<div id="cont4" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box5">Box5</div>
<div id="cont5" class="innerDiv" style="display:none"><p>Some text and img</p></div>



$(function() {
    $(".outerDiv").click(function() {
        $(".outerDiv").hide();
        $(".innerDiv").hide();
        $(this).next("div").show();
    });
});​
.outerDiv{border: 1px solid;}​ 
div,div p {display:inline;}

Box1
一些文本和img

框2
一些文本和img

框3
一些文本和img

方框4
一些文本和img

方框5
一些文本和img

$（函数（）{
$（“.outerDiv”）。单击（函数（）{
$（“.outerDiv”）.hide（）；
$（“.innerDiv”）.hide（）；
$（this.next（“div”）.show（）；
});
});​
.outerDiv{border:1px solid；}​ 
div，divp{display:inline；}

如果您打算在用户单击父div时显示每个隐藏的div，则此代码将帮助您。如果您隐藏父div，则内部内容也将隐藏。

我理解你的问题，这就是你需要的

JS

这将显示您单击的div的内部div内容，并隐藏同一元素级别上的其他div别忘了试用演示并给出反馈。（链接在答案的开头）

---

希望这能解决你的问题。如果你有任何问题，请不要犹豫。谢谢。

提示：如果不隐藏子元素，则无法隐藏父元素。确定。我不知道。将重试。当您隐藏父对象时，子对象也将自动隐藏。谢谢您的回答。现在可以了！：Djsfiddle.net/Weinz/xaMfk/10这是我的错误所在，但我只想在单击下一个框时显示div id=“cont1”。你的代码告诉我每一个“cont”div你最终使用了这个还是仅仅保留了你所拥有的？我最终使用了你的小提琴，但是有了新的添加，检查出的代码少了很多，嗯？看起来不错…很高兴对你有用。如果您能将此标记为答案，我需要在单击时隐藏“框1”，我将不胜感激。当我点击一个框时，我想隐藏所有的“框”并显示它的子div。但你们告诉我，如果父对象是隐藏的，那么子对象是隐藏的。如果要隐藏父div，则无法显示子div。必须显示父div

<div class="outerDiv" id="box1">Box1</div>
<div id="cont1" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box2">Box2</div>
<div id="cont2" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box3">Box3</div>
<div id="cont3" class="innerDiv" style="display:none"><p>Some text and img</p></div>    
<div class="outerDiv" id="box4">Box4</div>
<div id="cont4" class="innerDiv" style="display:none"><p>Some text and img</p></div>
<div class="outerDiv" id="box5">Box5</div>
<div id="cont5" class="innerDiv" style="display:none"><p>Some text and img</p></div>



$(function() {
    $(".outerDiv").click(function() {
        $(".outerDiv").hide();
        $(".innerDiv").hide();
        $(this).next("div").show();
    });
});​
.outerDiv{border: 1px solid;}​ 
div,div p {display:inline;}

<div id="box1" class="outer">Box1<div id="cont1" class="inner" style="display:none"><p>Some text and img</p></div></div>
<div id="box2" class="outer">Box2<div id="cont2" class="inner" style="display:none"><p>Some text and img</p></div></div>
<div id="box3" class="outer">Box3<div id="cont3" class="inner" style="display:none"><p>Some text and img</p></div></div>

$(function(){
    $(".outer").click(function(){  
        var id= this.id;
        $("#"+id+" .inner").show(); 
//user toggle instead of show if you need toggle

   });

});

$(function(){
   $("#wrapper").on('click', 'div.maindiv',function(){
       $(this).find('div.innerdiv').show();
       $(this).siblings('div.maindiv').hide();

   });
});