當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被禁用時顯示/隱藏登錄表單

回答

相關問題