当输入收音机激活时按类值激活显示块项目？

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和article之间有div。这意味着，你应该在你的CSS使用它，以及

#contentapp div article { 
    display: none; 
} 

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

编辑：下面一个的jsfiddle：https://jsfiddle.net/634ctoxw/

Answer 2

请尝试以下之一：

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

您需要妥善处理的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>