CODEWITHSUNDEEP
javascriptjquery
user3594106
user3594106

Reputation: 15

Disable a tab using jquery

I have tab structure like this:

 <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>

I am not using JqueryUI. So i don't want to do this as answered for same question

On hovering over a tab it changes the color(see fiddle). If a tab is disabled it should not change the color.

How do i disable third tab?

See Fiddle For Example

Upvotes: 0

Views: 1185

Answers (4)

Abhitalks
Abhitalks

Reputation: 28387

All you need to do is to add a class which makes it look disabled by muting the color and overriding the existing :hover classes. Also, need to disable the mouse events to make truly disabled.

Demo: http://jsfiddle.net/abhitalks/Lej2P/1/

Relevant CSS: (just add this class)

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

Upvotes: 0

Sami
Sami

Reputation: 4006

If you want to disable hover effect you can do sth like this

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

Upvotes: 0

Jaykishan
Jaykishan

Reputation: 1499

<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>

Insert CSS

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

Upvotes: 0

Samuel Caillerie
Samuel Caillerie

Reputation: 8275

I suppose you disable it by adding some class (let's say g-tabs-disabled). So just add the following rule in your css :

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

or if you have support for :not in CSS, you can merge it with the other rule :

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

See fiddle : http://jsfiddle.net/Lej2P/2/

Upvotes: 4

Related Questions