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

我有一个小的登录表单并希望在禁用JavaScript的情况下显示它。表格具有相似的结构：当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显示：无初始值。当点击“a”标签或悬停时，它应该更改为显示：块。在这里找到相似问题Show hide divs on click in HTML and CSS without jQuery，但只有解决方案标签和使用tabindex和：焦点。

完成感谢@Florian我修复了我的问题。这是代码，如果有人感兴趣。

在.css文件.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>

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

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

而且在.js文件

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

下面的代码将显示 “” 标签浏览器支持JavaScript时并在禁用时仅显示标签。

来源

2014-09-04 user3799263

你需要的东西，你可以切换。除了JavaScript之外，更改HTML页面中某些状态的唯一方法是复选框元素。用一些技巧可以用来显示/隐藏其他元素。

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

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

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

（从小提琴两者）

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

来源

2014-09-04 08:19:43 Florian

带标记“a”它不能完成？ – user3799263 2014-09-04 08:21:41

，我应该隐藏“a”标签，当JS被禁用并显示输入和标签？ – user3799263 2014-09-04 08:25:47

如果您只是在谈论外观，您可以对标签标签进行样式设计，并添加悬停效果，这样就没有视觉差异。看看分叉小提琴： http://jsfiddle.net/sp4ot4p2/ – Florian 2014-09-04 08:32:28

使用noscript这样的：

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

来源

2014-09-04 08:02:45

这将使div显示/隐藏点击“a”标签？ – user3799263 2014-09-04 08:22:17

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

回答

相关问题