如何禁用Zurb Foundation頂欄中的菜單條目

Question

在Web應用程序（=多用戶環境）中我需要禁用頂欄中的某些菜單條目，具體取決於當前登錄的用戶等。 UI，隱藏/省略菜單條目不是一個選項。添加禁用/停用/任何類別，這是繼續其他基礎元素的方式，例如顯然，框架不支持按鈕。

<li><a class="disabled" href="#">Disabled Menu Entry</a></li> 

任何想法？

Answer 1

你的問題與基金會「直接」無關。禁用和/或隱藏元素是CSS事物或JavaScript。您不能直接禁用錨標記，但可以模擬它的「禁用行爲」。基於你有什麼邏輯，你將如何確定一個錨標記應該被禁用，你可以做到以下幾點：

<style> 
.disabled-link { 
    text-decoration:none; // really not needed for the Top Bar, just for general technique 
    cursor: auto; 
} 
</style> 
<script> 
$(document).ready(function(){ 
    $(".disabled-link").click(function(e){ 
     e.preventDefault(); 
     return false; 
    }); 
}); 
</script> 
<a class="disabled-link" href="#">Disabled Menu Entry</a> 

，請注意該disabled-link類應基於某種邏輯有加，這取決於你的服務器端代碼 - 你沒有告訴我們你使用的其他工具。如果你使用ASP.Net，PHP或其他。

此外，您應該記得在服務器上進行驗證，因爲沒有辦法阻止用戶規避鏈接的禁用行爲。