Переключение между двумя элементами внутри DIV

Question

<div class="test"> 
<span class="one">Alias</span> 
<span class="two">Bobby</span> 
<span class="show"><input type="text" value="Bobby"><br> <button>Save</button></span> 
<span class="three">Edit</span> 
</div> 

Можно ли с помощью CSS, что, когда я нажимаю на test div, чтобы скрыть и показать span twospan show и, возможно, изменить Изменить Закрыть?

Если нет, то как мне это достичь?

Я подумал: основное внимание было уделено, но это было не так. Вот в пример того, что я хочу, но только показать, если нажать на нее:

https://jsfiddle.net/g9bwbw3d/

Answer 1

Я считаю, что вы ищете: активный селектор.
проклятия его не могущественны как js.
проверить это

https://jsfiddle.net/59ae3jmq/2/

<div id="test" class="test"> 
    <span class="one">Alias</span> 
    <span class="two">Bobby</span> 
    <span class="show"><input type="text" value="Bobby"><br><a href="#top"><button>Save</button></a></span> 
    <a href="#test" class="three">Edit</a> 
</div> 

.test { display: flex; line-height: 35px; border-bottom: 1px solid #EEE; ;pointer:default;outline:none} 
.test span { flex: 1;} 

.test .show { display: none; } 

.test:target > .two { display: none; } 
.test:target > .show { display: block; } 

Answer 2

Вы можете попробовать сделать это с JQuery.

Вот jsfiddle: https://jsfiddle.net/oqtgbhkv/1/

$(function() { 
    $('.three').on('click', function() { 
     $('span.two').css('display', 'none'); 
     $('span.show').css('display', 'block'); 
     $('span.three').css('display', 'none'); 
     $('input[name="name"]').val($('span.two').html()); 
    }); 

    $('span button').on('click', function() { 
    $('span.two').css('display', 'block'); 
    $('span.show').css('display', 'none'); 
    $('span.three').css('display', 'block'); 
    $('span.two').html($('input[name="name"]').val()); 
    }); 
}); 

Answer 3

Если вы собираетесь использовать Jquery вы можете сделать что-то вроде этого:

$('.test').bind('click', function() { 
    $('.two').hide(); 
    $('.show').show(); 
    $('.three').text('Close'); 
}) 

Fiddle: https://jsfiddle.net/jltorresm/q61mv800/2/