Question

这是我创建菜单的小提琴。我想保持启用第一个链接并禁用其余部分。

当我们将鼠标从该链接中移除时，它应该看起来像。我想停用Green和Red个链接。

HTML

<div class="home-content">
    <div class="menu-bar">
        <ul class="nav nav-tabs">
            <li data-color="#00f" class="active"><a href="#">Blue<sup>beta</sup></a></li>
            <li data-color="#0f0"><a href="#">Green<sup>beta</sup></a></li>
            <li data-color="#f00"><a href="#">Red</a></li>
        </ul>                        
    </div>
</div>

<label id="l1"> Change color </label>

哪个css部分处理这个？

Answer 1

您可以将class="disabled"添加到li元素，以获得禁用的视觉效果。

<ul class="nav nav-tabs">
  <li data-color="#00f" class="active"><a href="#">Blue<sup>beta</sup></a></li>
  <li data-color="#0f0" class="disabled"><a href="#">Green<sup>beta</sup></a></li>
  <li data-color="#f00" class="disabled"><a href="#">Red</a></li>
</ul>

请参阅有关如何禁用标签的Bootstrap文档。请注意它只是应用CSS，你也必须禁用a标签的功能。

Answer 2

你可以让它看起来被禁用，但你实际上不能仅使用CSS来禁用链接。你需要像凯文所说的JavaScript / HTML。

确保为此添加禁用类，如下所示：

<div class="home-content">
    <div class="menu-bar">
    <ul class="nav nav-tabs">
        <li data-color="#00f" class="active"><a href="#">Blue<sup>beta</sup></a></li>
        <li data-color="#0f0" class="disabled"><a href="#">Green<sup>beta</sup></a></li>
        <li data-color="#f00" class="disabled"><a href="#">Red</a></li>
    </ul>                        
    </div>
</div>

然后在你的css中：

.disabled > a
{
    text-decoration: none;
    cursor: default;
}

看起来它不是一个链接，但它仍然是。只使用纯CSS

，这是最好的

fiddle

编辑：删除了颜色更改

禁用菜单中的链接按钮

2 个答案: