显示glyphicon立即当单选按钮被选中

Question

我有以下形式和正在使用的CSS显示显示跨度使用的代码

<style> 
.glyphicon{ 
    display: none; 
} 

input[type="radio"]:checked + span{ 
display: block; 
} 
</style> 

<form> 
    <div class="form-group" id="myform"> 
      <label for="usr">Q1:Are these dates in chronological order?1492,1941,1586     </label> 
    </div> 
    <div class="radio"> 
     <label><input type="radio" id="opt0" name="optradio0">yes<span id="sp0" class="glyphicon glyphicon-remove"></span></label> 
    </div> 
    <div class="radio"> 
     <label><input type="radio" id="opt1" name="optradio0">no<span id="sp1" class="glyphicon glyphicon-ok"></span></label> 
    </div> 
    <br/> 
</form> 

被点击单选按钮时然而，有一个问题，即glyphicons是当页面加载时可见。见下面

http://upscfever.com/upsc-fever/en/apti/en-apti1-chp6a.html

链接然而，当我删除的页面下面给出的代码工作正常。那么我怎么能保持下面的代码，并仍然达到目的。

<script> 
      $(document).ready(function(){ 
             $("#header").load("http://upscfever.com/upsc-fever/header.html"); 
$("#footer").load("http://upscfever.com/upsc-fever/footer.html"); 


      });   
     </script> 

Answer 1

您可以检查开发控制台中的图形。找出它的标识符，然后在你的CSS中，将其初始显示设置为none。

不要忘记尽可能具体以便将来证明它。