Question

我有像

这样的分歧

<div id="divFirst"></div>
<div id="divSecond"></div>
<div id="divThid"></div>
<div id="Fourth"></div>

我有四个按钮“First，Second，Third＆4th;”。每当我点击任何按钮，相应的div应该显示，其他人应该隐藏..我正在尝试使用兄弟姐妹隐藏..

var selected = this.name;
$('#'+selected).show('slow').siblings().hide('slow')

谢谢。尼扎姆

Answer 1

看起来你的选择器是错误的（假设按钮的名称只是First，Second等。）

尝试按如下方式更新代码：

$('#div'+selected).show('slow').siblings('div').hide('slow');

当然，您需要更新第四个<div>元素的ID，以包含div前置字符串：

<div id="divFourth"></div>

此外，您的第三个<div>有拼写错误（请参阅divThid，应为divThird）。

这是jsFiddle Demo。

Answer 2

我建议您使用包装器div，并为所有div的click事件访问定义一个类或使用包装器＆gt;儿童选择器。

<script type="text/javascript">
$(function(){
    $('#wrapper > div').click(function(){
        $(this).show().siblings().toggle();
    });
});
</script>

Answer 3

试试这个：

<强> HTML

<div id="buttons">
    <button name="divFirst">A</button>
    <button name="divSecond">B</button>
    <button name="divThird">C</button>
    <button name="divFourth">D</button>
</div>
<div id="divs">
    <div id="divFirst" class="hide">A</div>
    <div id="divSecond" class="hide">B</div>
    <div id="divThird" class="hide">C</div>
    <div id="divFourth" class="hide">D</div>
</div>

<强> CSS

.hide{
    display:none;
}
.show{
    display:block;
}

<强> JQUERY

$('#buttons button').click(function(){
    var selected = $(this).attr('name');
    $('#divs div').attr({class:'hide'});
    $('#' + selected).attr({class:'show'});
});

隐藏基于click事件的兄弟分区

3 个答案: