jquery - 使用 JQuery 通过按钮选择 DIV

Question

我有两个 DIV 标签，即响应 1 和响应 2。我想用按钮选择这些 div。当我单击respond1Button 时，它应该显示respond-1 div，同样在单击repond2Button 时，将显示respond-2 div。

默认页面应该显示respond-1 div。

Answer 1

对于像下面这样的 HTML，

<div id="container">
    <div id="respond-1" class="responses">Respond 1</div>
    <div id="respond-2" class="responses" style="display: none" >Respond 2</div>
</div>
<button id="respond1Button">Respond 1</button>
<button id="respond2Button">Respond 2</button>

下面是根据相应按钮单击显示/隐藏的脚本，

$(function() {
    var $respond1 = $('#respond-1');
    var $respond2 = $('#respond-2');
    var $responses = $('.responses');

    $('#respond1Button').click(function() {
        $responses.hide();
        $respond1.show();
    });

    $('#respond2Button').click(function() {
        $responses.hide();
        $respond2.show();
    });
});

演示

Answer 2

请注意，您不能有多个具有相同 ID 属性的元素，并且 DIV 标记没有名为 NAME 的属性。

在这种情况下，我认为最好的选择是为 BUTTON 和 DIV 定义一个类“respond-1”。然后，根据单击的按钮的类别，我们显示相应的 DIV。（对不起任何英语错误，它不是我的母语）:)

$(document).ready(function(){

    $('button.respond-1, button.respond-2').click(function(){

        $('div.respond-1, div.respond-2').hide();
        $('div.' + $(this).attr('class')).show();

    });

});

Answer 3

你在寻找这样的东西吗？

<div id="respond-1">First Response<div>
<div id="respond-2" style="display:none;">Second Response<div>

<button type="button" onclick="$('#respond-1').show();$('#respond-2').hide():">repond1Button</button>

<button type="button" onclick="$('#respond-2').show();$('#respond-1').hide():">repond2Button</button>

Answer 4

您可以使用该.click事件来绑定单击处理程序。使用 选择具有 ID 的元素$('#id')，因此将这两者结合起来，您可以轻松创建一个使 div 可见的按钮。

<div id="respond-1"></div>
<button id="respond1Button">Show Respond 1</button>

// on DOM ready...
$(function() {
    // Select the divs
    var resp1 = $('#respond-1');

    // Hide them to start
    resp1.hide();

    // Bind click handlers
    $('#respond1Button').click(function() {
        resp1.show();
    });
});