如何在 Zurb Foundation 顶部栏中禁用菜单条目答案

【问题标题】：How to disable menu entries in Zurb Foundation Top Bar如何在 Zurb Foundation 顶部栏中禁用菜单条目
【发布时间】：2013-03-22 21:21:39
【问题描述】：

在 Web 应用程序（= 多用户环境）中，我需要禁用顶部栏中的某些菜单条目，具体取决于当前登录的用户等。为了保持 UI 的一致性，隐藏/省略菜单条目不是一个选项。添加 disabled/inactive/whatsoever 类，这是其他基础元素的方式，例如显然，框架不支持按钮。

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

有什么想法吗？

【问题讨论】：

标签： zurb-foundation

【解决方案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 或其他。

此外，您应该记住在服务器上进行验证，因为无法阻止您的用户规避链接的禁用行为。

【讨论】：