Question

我有这样的标签结构：

 <ul class="g-tabs-tabs" style="width: 160px;">
      <li class="g-tabs-tab" data-idx="0">General</li>
      <li class="g-tabs-tab" data-idx="1">Extension</li>
      <li class="g-tabs-tab" data-idx="2">Lines</li>
 </ul>

我没有使用JqueryUI。所以我不想做this as answered for same question

将鼠标悬停在标签上会改变颜色（请参阅小提琴）。如果禁用选项卡，则不应更改颜色。

如何禁用第三个标签？

See Fiddle For Example

Answer 1

我想你通过添加一些类来禁用它（让我们说g-tabs-disabled）。所以只需在你的css中添加以下规则：

.g-tabs-disabled:hover {
    background-color:#f4f4f4;   
}

或者如果您在CSS中支持:not，则可以将其与其他规则合并：

.g-tabs-tab:not(.g-tabs-disabled):hover {
    background-color:#0000FF;
}

请参阅小提琴：http://jsfiddle.net/Lej2P/2/

Answer 2

<ul class="g-tabs-tabs" style="width: 160px;">
    <li class="g-tabs-tab" data-idx="0">General</li>
    <li class="g-tabs-tab" data-idx="1">Extension</li>
    <li class="g-tabs-tab" data-idx="2" data-type="disabled">Lines</li>
</ul>

插入CSS

li[data-type=disabled]:hover{background-color:#FFFFFF;}

Answer 3

如果你想禁用悬停效果，你可以这样做

 $('ul li:nth-child(3)').hover(function() {
    $(this).css('background-color', 'transparent');
  });

Answer 4

您需要做的就是添加一个类，通过将颜色静音并覆盖现有的:hover类来使其看起来处于禁用状态。此外，需要禁用鼠标事件才能真正禁用。

演示：http://jsfiddle.net/abhitalks/Lej2P/1/

相关CSS :(只需添加此类）

.g-tabs-tabs > .disabled, .g-tabs-tabs > .disabled:hover {
    background-color:#f4f4f4;
    pointer-events: none;
    color: #ccc;
}

使用jquery禁用选项卡

4 个答案: