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 two并显示span 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/

Authorization

Answer 3

如果你打算使用Jquery，你可以这样做：

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

小提琴：https://jsfiddle.net/jltorresm/q61mv800/2/

在div

3 个答案: