JQuery 选项卡 - 使选定的选项卡可点击答案

【问题标题】：JQuery Tab - Make Selected tab clickableJQuery 选项卡 - 使选定的选项卡可点击
【发布时间】：2009-11-13 20:51:55
【问题描述】：

我基本上需要当前选定的标签保持可点击状态（意思是链接应该仍然有效）。

tab中的内容是通过ajax加载的，可以改变，所以人们可以通过再次单击选项卡来“刷新”内容。但是默认设置使选项卡一旦打开就无法点击已选中，这使用户必须单击另一个选项卡然后返回刷新内容。

感谢任何帮助，谢谢。

【问题讨论】：

这不是一个好的 UI 范例。这样想，访问您页面的用户必须知道他们必须再次单击选项卡才能刷新。相反，为什么不添加一个刷新图标或一些像 gmail 或 facebook 那样的消息。更改界面范例通常不是一个好主意。 :-)
我同意 AboutDev。您可以轻松地将 Jquery UI 刷新图标添加到选项卡中，该图标也将在选定选项卡中保持可点击状态。
我同意“刷新”图标。但是，我不确定如何将其与“JQuery UI”选项卡配合使用。如果我添加图像和锚链接，它会滑过选项卡...我有这样的东西：
Countries

状态

标签： jquery-ui jquery jquery-ui-tabs

【解决方案1】：

当一个标签被点击时，标签插件会触发一个 'tabsselect' 事件。注册一个回调，它的第二个参数将有一个 'tab' 属性，您可以在其中检查您所在的选项卡：

jQuery('#tabs-container').bind('tabsselect', function(e, tabsContainer) {

   jQuery(tabsContainer.tab).attr('href'));
});

编辑：

它只会在选项卡实际更改时触发。也许绑定在选项卡结构中的锚元素上，并检查 ui-tabs-selected 类。选项卡插件上有不错的文档：http://docs.jquery.com/UI/Tabs。

大概：

jQuery('#tabs-container a').bind('click', function() {
    if(jQuery(e.target).hasClass('ui-tabs-selected')) {
        // do some stuff
    }
});

【讨论】：

【解决方案2】：

定义锚点的onclick事件到标签以重新加载或发送到父页面，像这样

<div id="divTab">
  <ul>
    <li><a href="#tab_1">First Tab</a></li>
    <li><a href="#tab_2" style="cursor:pointer;" onclick="window.location.reload();">Second Tab</a>
    </li>
    <li><a href="#tab_3" style="cursor:pointer;" onclick="window.location.replace('url');">Third Tab</a>
    </li>
  </ul>
</div>

【讨论】：