Question

我有一个带有段落和联系表单的HTML。当浏览器禁用JavaScript时，我想显示联系表单和文本段落。

否则，我想显示联系人按钮，用户可以单击该按钮并显示该表单。

Answer 1

将按钮的样式设置为display:none;

如果启用了javascript，请默认隐藏表单并显示按钮。

然后当他们点击联系人按钮时，显示它。

$(document).ready(function(){
  $("#buttonID").show();
  $("#formID").hide();
  $("#buttonID").click(function(){
    $("#formID").show();
  });
});

Answer 2

<span id="formAndParagraph">
    <p id="Paragraph">lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
    <form id="Contact">
        Name: <input type="text"><br>
        Comment: <input type="text"><br>
    </form>
</span>
<input type="button" id="Button" value="Click me" onclick="$('#formAndParagraph').show();" style="display:none">
<script>
$('#formAndParagraph').hide();
$('#Button').show();
</script>

jsFiddle here

Answer 3

好的:)所以这是我的解决方案：

http://jsfiddle.net/tracyfu/Sj5cy/

这就是它的作用：

我将#contact-button css设置为display: none;，以便无论JS是否存在，它都会自动隐藏。这样，如果禁用JS，则按钮不会显示。
在JS中，我显示#contact-button，然后隐藏#contact-form。 JQuery只会在JS启用时才能工作，所以它的作用是显示按钮并为拥有JS的人隐藏表单。对于已禁用JS的人，表单不会受到影响，并且会像往常一样显示。
我在按钮上添加了click事件以显示表单。

此解决方案的目标是，如果禁用JS，则没有按钮。

使用Jquery选择器添加HTML标记

3 个答案: