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或其他。

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

如何禁用Zurb Foundation Top Bar中的菜单条目

1 个答案: