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>

然而，在加载页面时会出现字形可见的问题。见下面的链接

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

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

不要忘记尽可能具体到未来证明它。

选中单选按钮时，立即在块中显示glyphicon

1 个答案: