Question

我想在以下位置创建一个程序： *单击Span 1时，将显示Span 2，并且将禁用Span 1。 *单击Span 2时，将显示Span 1，并且将禁用Span 2。

这是我的代码，我认为这很奇怪。非常感谢您的帮助。

CSS

body {
  display: block;
}
.span1:focus ~ .span2 {
  display: none;
}
.span2:focus ~ .span1 {
  display: block;
}

HTML

<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>

Answer 1

使用下面的css：

s = s.substring(0, i);

s.indexOf("*begin");

检查jsfiddle demo

Answer 2

纯CSS和HTML无法解决这个问题，答案可以通过javascript找到。

<span class="span1" tabindex="0" onclick="span1Clciked()">Span 1</span>
<span class="span2" tabindex="0" onclick="span2Clicked()">Span 2</span>

和javascript

<script>
function span1Clicked(){
    var x = document.getElementsByClassName("span2").item(0);
    x.style.visibility='hidden';
 // other stuff

}
function span2Clicked(){
    var x = document.getElementsByClassName("span1").item(0);
    x.style.visibility='hidden';
 // other stuff

}    
</script>

Answer 3

可以轻松完成并在JavaScript中具有更大的灵活性。 jQuery中的示例：

$('span').click(function() {
  $(this).css('visibility','hidden').siblings().css('visibility','visible');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="span1" tabindex="0">Span 1</span>
<span class="span2" tabindex="0">Span 2</span>

单击时使用纯CSS和HTML显示和隐藏div元素

3 个答案: