Question

我想禁用一些easytabs，但我发现无法阻止用户进入禁用的标签。我怎么能这样做？

这是我的标签集的样子： enter image description here

当我按下按钮禁用B＆amp; C，我设定的风格＆＃34;禁用＆＃34;在两个选项卡上，并尝试在鼠标单击它们时返回false。残疾人的外表是我想要的：

enter image description here

但仍然可以选择标签。

为什么？

我试图控制li和a的点击次数。

http://jsfiddle.net/8VkF8/

HTML：

<div id="tab-container" class="tab-container">
  <ul class="etabs">
    <li class="tab"><a href="#a">A</a></li>
    <li class="tab"><a href="#b">B</a></li>
    <li class="tab"><a href="#c">C</a></li>
    <li class="tab"><a href="#d">D</a></li>
  </ul>
  <div class="panel-container">
    <div id="a">
      1st page
    </div>
    <div id="b">
      2nd page
    </div>
    <div id="c">
      3rd page
    </div>
    <div id="d">
      4th page
    </div>
  </div>
</div>
<button onclick="on_disable_b_and_c_clicked()">Disable B &amp; C</button>
<button onclick="enable_all()">Enable</button>

JS：

$(function()
{
  var tabs = $('#tab-container');
  tabs.easytabs({ animate: false });  
});

function on_disable_b_and_c_clicked()
{
  var tabs = $('#tab-container');
  disable_easytabs(tabs, [1,2]);
  return false;
}

function enable_all()
{
  var tabs = $('#tab-container');
  disable_easytabs(tabs, []);
}

function disable_easytabs(tabs, indexes)
{
    var lis = tabs.children('ul').children();
    var index = 0;
    lis.each(function()
    {
        var li = $(this);
        var a = li.children('a');
        var disabled = $.inArray(index, indexes) != -1;
        if (disabled)
        {
            li.addClass('disabled');
            li.on("click", returnFalse);
        }
        else
        {
            li.removeClass('disabled');
            li.off('click', returnFalse);
        }
        index++;
    });
}

function returnFalse(e)
{
  return false;
}

的CSS：

.etabs
{
  margin: 0;
  padding: 0;
}

.tab
{
  top: 1px;
  padding: 6px 10px;
  display: inline-block; zoom:1;
  *display:inline;
  background: #eee;
  border: solid 1px #999;
  border-bottom: none;
}

.tab a
{
  text-decoration: none;
  display: block;
  padding: 0 10px;
  outline: none;
}
.tab a:hover
{
  text-decoration: none;
}

.tab.active
{
  background: #fff;
  padding-top: 6px;
  position: relative;
  border-color: #666;
}

.tab a.active
{
  text-decoration: none;
}

.tab-container .panel-container
{
  height: 140px;
  background: #fff;
  border: solid #666 1px;
  padding: 10px;
}

a
{
  color: #000;
}

ul.etabs li.disabled a
{
  color: #aaa;
  cursor: default;
}

Answer 1

EasyTabs提供了一个点击前事件，您可以绑定它以查看disabled类是否存在并在处理程序中返回false以停止选项卡选择：

tabs.bind("easytabs:before", function (e, clicked) {
    if(clicked.parent().hasClass('disabled')) {
        return false;
    }
});

我把你的小提琴分到了原地，并取出了不必要的.on('click')处理程序：

http://jsfiddle.net/Aa8Z3/

禁用一些easytabs

1 个答案: