Question

我的HTML：

<div id="contentapp">
    <input type="radio" name="menu" id="interest" checked>
    <input type="radio" name="menu" id="about">

    <div id="tab">
        <label for="interest">Interest</label>
        <label for="about">About</label>
    </div>
        <div id="content">
        <article class="interest">
            Interest
        </article>
        <article class="about">
            About
        </article>
    </div>
</div>

我的CSS：

#contentapp article {
    display: none;
}

#contentapp input#interest:checked ~ article.interest{
    display: block;
}

这是我的问题。。。：单击单选按钮时，如何以正确的方式激活显示块？

Answer 1

你在contentapp和文章之间有一个div。这意味着，您也应该在css中使用它

input

编辑：这里有一个jsfiddle：https://jsfiddle.net/634ctoxw/

Answer 2

尝试以下方法：

 x = rnorm(n = 1e4, mean = 2, sd = 4)
 y = rlogis(1e4, 20)
 z = rexp(1e4, 5)

您需要正确处理ID。

Answer 3

使用以下代码：

$(document).on('click', "input[type='radio']", function(){
  $('#contentapp article').hide();
  var id = $(this).attr('id');
  $('.' + id).show();
});

#contentapp article {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentapp">
    <input type="radio" name="menu" id="interest" checked>
    <input type="radio" name="menu" id="about">

    <div id="tab">
        <label for="interest">Interest</label>
        <label for="about">About</label>
    </div>
        <div id="content">
        <article class="interest">
            Interest
        </article>
        <article class="about">
            About
        </article>
    </div>
</div>

当输入无线电激活时，按类值激活显示块文章？

3 个答案: