Показать разные divs на той же странице

Question

Мне нужно отобразить div = «block2», когда пользователь нажимает «Да» и отображает div = «block3», когда пользователь нажимает «Нет».

Вопрос: 1. Как мне отображать как block2 & block3 в том же месте, где в настоящее время отображается блок2. 2. block2 должен быть скрыт при нажатии на «Нет» и Block3 должен быть скрыт при нажатии «Да»

<div id="block1"> 
    <input type="submit" value="Yes"/> 
    <input type="submit" value="No"/> 
</div> 

<div id="block2"> 
    Block2 
</div> 

<div id="block3"> 
    Block3 
</div> 

css 

html, body{ 
    height: 100%; 
    width:100%; 
} 
#block1{ 
    height:10%; 
    width:50%; 
    text-align:center; 
    float:left; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    border-style:solid; 
    border-color:green; 

} 

#block2{ 
    height:90%; 
    width:50%; 
    float:right; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    border-style:solid; 
    border-color:green; 
} 


#block3{ 
    height:80%; 
    width:50%; 
    float: left; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    border-style:solid; 
    border-color:green; 

Answer 1

http://jsfiddle.net/zcWJ6/6/

HTML:

<div id="block1" class="box"> 
    <input id="yes" type="submit" value="Yes"/> 
    <input id="no" type="submit" value="No"/> 
</div> 

<div id="container"> 

    <div id="block2" class="box"> 
     Block2 
    </div> 

    <div id="block3" class="box"> 
     Block3 
    </div> 
</div> 

CSS:

#container { 
position: relative; 
height: 100px; 
width: 50%; 
} 

#block1 { 
    height:10%; 
    width:50%; 
    text-align:center; 
    border-bottom: none; 
} 

#block2{ 
    background: violet; 
    position: absolute; 
} 

#block3{ 
    background: yellow; 
    position: absolute; 
} 

.box { 
    height:100%; 
    width:100%; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
    border: 2px solid #000; 
} 

ЯШИ:

$('#yes').click(function(){ 
    $('#block3').hide(); 
    $('#block2').show(); 
}); 

$('#no').click(function(){ 
    $('#block2').hide() 
    $('#block3').show(); 
}); 

Answer 2

Вы можете отобразить их в том же месте, используя position: absolute; top: 0; left: 0. Просто установите любой родительский div, чтобы position: relative.

Вы можете использовать javascript или библиотеку jQuery для прослушивания щелчка и отображения нужного элемента.

Answer 3

Сделать строку javascript div2 и div3.

Теперь добавьте еще один div.

<div id="displayhere"></div> 

Сохраните ваши div2 и div3 в строке javascript. Пользовательское событие Jquery click. После события click добавьте содержимое div2 для отображения только html.

$("#display2").click(function(){ 
    $("#displayhere").html("div2 content javascript string"); 
}); 

Answer 4

Вот один из возможных решений, которые могут работать на вас:

Fiddle Demo

Я добавил добавил оберточный контейнер для ваших содержательных блоков, и подправил CSS чуть-чуть.

HTML:

<div id="block1"> 
     <input id="yes" type="submit" value="Yes"/> 
     <input id="no" type="submit" value="No"/> 
    </div> 
    <div class="container"> 
     <div id="block2"> 
      Block2 
     </div> 

     <div id="block3"> 
      Block3 
     </div> 
    </div> 

CSS:

//new entries 
.container{ 
    position: relative; 
    height: 300px; 
} 
.hidden {display:none;} 

редактировать (добавлен второй способ сделать это с помощью делегирования) JS:

$('#yes').on('click', function() { 
     $('#block2').toggleClass('hidden'); 
    }); 

    $('#no').on('click', function() { 
     $('#block3').toggleClass('hidden'); 
    }); 

    // OR 

    $('#block1').on('click', 'input', function() { 
     $('.container').children('div').eq($(this).index()).toggleClass('hidden'); 
    });