Выберите DIV кнопкой JQuery

Question

У меня есть два тега DIV, а именно ответ-1 и ответ-2. Я хочу выбрать эти divs с помощью кнопок. Когда я нажму кнопку response1Button, он должен отобразить ответ-1 div и аналогично при нажатии кнопки repond2, будет отображен ответ-2.

По умолчанию страница должна отображать ответ-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(); 
    }); 
}); 

DEMO

Answer 2

Вы ищете что-то вроде этого?

<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 3

Вы можете использовать событие .click, чтобы связать обработчик кликов. Элементы, имеющие идентификаторы, выбираются с помощью $('#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(); 
    }); 
}); 

Answer 4

Обратите внимание, что вам can not имеют несколько иены с одинаковым атрибутом идентификатора, а тег DIV не имеет атрибута с именем NAM E.

В этом случае я полагаю, что лучшим вариантом является определение класса «ответ-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(); 

    }); 

});