Question

我有一个小的登录表单，并希望显示它以防JavaScript被禁用。表格具有类似的结构：

<a ...href="#"...>Login</a>
<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
<form action="/login/" method="post" ....>
.... form components ....
</form></div>

div with class“dropdown-menu”有display：none initial。点击“a”标签或悬停时，它应更改为display：block。在Show hide divs on click in HTML and CSS without jQuery找到了simillar问题，但只有标签和使用 tabindex和：focus 的解决方案。

完成感谢@Florian我已经解决了我的问题。如果有人有兴趣，这是代码。

<。> .html文件

<a class="dropdown-toggle" style="display:none" href="#" data-toggle="dropdown" id="navLogin">Login</a>

<input type='checkbox' style='display: none' id=cb>
<label class="dropdown-toggle" id="labelLogin" for=cb>Login</label>

<div class="dropdown-menu" style="padding-left:17px; left:-70px; width:200px;">
    <form ...... >
         ... Form Components...
    </form>
</div>

在.css文件中

input:checked + label + div { display: block; }
label {position: relative;

padding: 10px 15px;
color:#428bca;
}

在.js文件中

$('#navLogin').removeAttr('style');
$('#labelLogin').css('display', 'none');

以下代码在启用JavaScript时会显示“a”标记，并且在禁用时仅显示标记。

Answer 1

像这样使用noscript：

 <noscript>
    <style>
       #noscript{display:none !important;}
       #container{display:none;}
    </style>
 </noscript>

Answer 2

你需要一些可以切换的东西。除了javascript之外，在html页面中更改某些状态的唯一方法是checkbox元素。通过一些技巧，这可以用来显示/隐藏其他元素。

看一下这个例子http://jsfiddle.net/gSPqX/1/（不是我自己创建的）。它比您链接的解决方案更简单，也使用div。

基本上诀窍是在css代码中使用+运算符来选择下一个兄弟元素。

input:checked + label + div { display: none; }

（取自小提琴）

所以你有三个元素，复选框输入，标签和div。该复选框用于保存当前状态，标签用于具有较大的可点击区域，div包含实际数据。

禁用JavaScript时显示/隐藏登录表单

2 个答案: