僅允許超鏈接工作如果JavaScript被禁用？

我一直在研究和學習越來越多關於HTML 5，JQuery，CSS3以及在JavaScript被禁用或未被禁用時隱藏和禁用某些元素的功能。（<noscript>標籤）僅允許超鏈接工作如果JavaScript被禁用？

我的問題是，

我如何做一個超級鏈接ONLY工作，如果禁用JavaScript？
如果啓用JavaScript，我該如何確保以下的超級鏈接我下拉登錄菜單顯示，而不是？

HTML

夠簡單了，我躲在我的購物車區，並更改登錄鏈接，如果JS被禁用。

<!-- If JavaScript is disabled it will make the login link take you to a login page instead of a drop-down box. -->   
<noscript> 
    <style> 
     .login-form, .js-enabled{ 
      display: none; 
     } 
     .cart{ 
      top: -80px; 
     } 
    </style>         
    <div class="cart"> 
     <a href="#" id="cart_img"> 
      <img src="img/bag.jpg" alt="Check Cart" 
      onmouseover="this.src='img/bag-gold.jpg'" 
      onmouseout="this.src='img/bag.jpg'"> 
     </a> 
     <a href="#">Why HorseTack?</a> | 
     <a href="#">About</a> | 
     <a href="#">Contact</a> | 
     <a href="http://www.LOGINPAGELINK.com">Login</a> 
    </div> 
</noscript> 
<!-- End JavaScript text --> 

<div class="cart js-enabled"> 
    <a href="#" id="cart_img"> 
     <img src="img/bag.jpg" alt="Check Cart" 
     onmouseover="this.src='img/bag-gold.jpg'" 
     onmouseout="this.src='img/bag.jpg'"> 
    </a> 
    <a href="#">Why HorseTack?</a> | 
    <a href="#">About</a> | 
    <a href="#">Contact</a> |       
    <a href="#" class="login-box">Login</a> 
     <div class="login-form"> 
      <form class="login-frm"> 
       <label><input type="text" placeholder="Username"></label> 
       <label><input type="password" placeholder="Password"></label><br> 
       <input type="submit" value="Login"><br> 
       <a href="#">New User?</a> 
      </form> 
     </div> 
</div>

JQuery的

這使得登錄框滑下（只是爲了避免帶人到登錄頁面，除非他們有）

// Login Box Pop-Up 
jQuery(document).ready(function() { 
    jQuery(".login-form").hide(); 
    //toggle the componenet with class msg_body 
    jQuery(".login-box").click(function() 
    { 
    jQuery(this).next(".login-form").slideToggle(500); 
    }); 
});

我想，而不是什麼有<noscript>標記和內容重複，超鏈接的方式只有在沒有JavaScript時纔有效。

我已經設置頁面了，讓用戶知道他們的JS被禁用（如堆棧溢出做）

關於我的問題，任何問題（希望我是不能含糊？）問！

來源

2012-10-19 user1759857

如何讓超鏈接只在JavaScript禁用時才起作用？如果啓用了JavaScript，如何確保我的下拉式登錄菜單顯示按照超鏈接的INSTEAD？

編寫一個使菜單顯示的JavaScript函數。確保它捕獲第一個參數（這將是事件對象）。

將函數綁定爲an event handler。

在事件對象上調用preventDefault()。

function (event) { /* display menu then ... */ event.preventDefault(); }

<noscript>標籤

幾乎總有最壞的解決問題的辦法。是progressive和unobtrusive。

來源

2012-10-19 16:09:29 Quentin

你忘了不可避免的「Tad da！」^_^ – Neal

所以event.preventDefault（）;會在我的下拉菜單的代碼結尾處出現？我想了解，並感謝您的參考，因爲那些真的很有幫助。 – user1759857

NVM得到它。再次感謝您：D – user1759857

-1

您可以顯示鏈接，如果啓用了javascript，將其隱藏。

來源

2012-10-19 16:10:37 MKS

如果鏈接處於隱藏狀態，用戶無法點擊它使菜單顯示。 – Quentin

這是真的。然而，OP說：「如果JavaScript只是被禁用，我怎麼才能讓超鏈接工作？」。我認爲這個鏈接應該只在javascript（並且只有在）被禁用的情況下顯示。所以，我想這個鏈接是可見的，除非有一個javascript函數明確地隱藏它 - 這意味着當禁用javascript時鏈接是可見的和可用的。 – MKS

我很抱歉。我應該說，當JS被禁用時，使超鏈接像正常一樣工作，否則顯示下拉式登錄菜單。抱歉! – user1759857

-1

你可以把一個div裏面的鏈接，如果啓用了JS，刪除鏈接，並把一個事件，該div 像：

<div class="link-holder"> 
    <a href="page.html">Link</a> 
</div>

和jQuery：

$(document).ready() 
{ 
    $('.link-holder').text('').click(function(){ 
     displayLogin(); //assuming displayLogin() has your function to, well, display the login 
    }); 
}

來源

2012-10-19 16:15:28 Eagle

Div元素的設計不是交互式的。這樣做會打破任何一種不以指針爲基礎的HUI設備（因此對於任何使用鍵盤，呼吸開關等的人，包括大多數依靠屏幕閱讀軟件的人）。 – Quentin

你在這裏有一個觀點 – Eagle

僅允許超鏈接工作如果JavaScript被禁用？

回答

相關問題