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


Show/Hide login form when JavaScript is disabled

我有一个小的登录表单,希望在禁用JavaScript的情况下显示它。Form具有类似的结构:

<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具有display:none初始值。当点击"a"标记或悬停时,它应该变为显示:块。在这里发现了类似的问题在没有jQuery的情况下在HTML和CSS中显示点击隐藏div,但只有标签和使用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"标记,在禁用时仅显示标签。

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

看看这个例子http://jsfiddle.net/gSPqX/1/(不是我自己创造的)。它比您链接的解决方案简单一点,还使用了div.

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

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

(取自小提琴)

因此,您有三个元素,复选框输入、标签和div。复选框用于保存当前状态,标签用于具有更大的可点击区域,div包含实际数据。

像这样使用noscript

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