Question

所以，我有8个按钮。当按下它们时，每个按钮显示一个div。问题是，当我按下多个按钮时，所有按钮都会显示它们的div并且不会删除之前的div。我能做什么？ HTML：

<button id ="btn1" >a</button>
<button id ="btn2">b</button>
<button id ="btn3">c</button>
<button id ="btn4">d3</button>
<button id ="btn5">e 4</button>
<button id ="btn6">f 5</button>
<button id ="btn7">g 6</button>
<button id ="btn8">h 7</button>

<div id="story">asdaasdasdasdadsasdsds</div>
<div id = "z2">asdaasdadsd</div>
<div id = "z3">asdasdasdad</div>
<div id = "z4">asdasdasdad</div>
<div id = "z5">asdasdasdad</div>
<div id = "z6">asdadsdaad</div>
<div id = "z7">asdads</div>

CSS：

＃Z1，    ＃Z2，    ＃Z3，    ＃z4，    ＃Z5，     ＃Z6，     ＃Z7

{display：none; }

JQuery的：

$(function() {

$('#btn1').on('click', function() {

    $('#story').fadeToggle(400);
}); 

$('#btn2').on('click', function() {

    $('#z1').fadeToggle(700);
}); 

    $('#btn3').on('click', function() {

    $('#z2').fadeToggle(700);
});

    $('#btn4').on('click', function() {

    $('#z3').fadeToggle(700);
});

    $('#btn5').on('click', function() {

    $('#z4').fadeToggle(700);
});

    $('#btn6').on('click', function() {

    $('#z5').fadeToggle(700);
});

    $('#btn7').on('click', function() {

    $('#z6').fadeToggle(700);
});

    $('#btn8').on('click', function() {

    $('#z7').fadeToggle(700);
});

});

Answer 1

您可以在div中添加一个类＆div; divToHide＆＃34;例如，并致电

 $('.divToHide').hide();

点击方法中的

这是一个小提琴：http://jsfiddle.net/U5PEu/1/

顺便说一句，你在＃和z4

之间有一个额外的空间

Answer 2

你没有隐藏其他人，因为你没有对他们做任何事情。尝试更改点击处理程序的所有，如下所示：

$('#btn1').on('click', function() {
    // hides currently shown divs
    $('.visible').removeClass('visible').fadeOut(700); 

    // shows div in question, and adds a class that can be queried later
    $('#story').addClass('visible').fadeIn(400);
});

添加的“可见”类可用于收集和删除任何可见的div（或任何元素，实际上），无论显示什么。

按钮显示div而不删除前一个div

2 个答案: