Javascript Jquery UI选项卡禁用某些选项卡的AJAX功能

在使用jQueryUI选项卡时，如何禁用一两个选项卡的AJAX功能

---

因此，单击后，用户将被带到由链接的href属性定义的URI。现在，默认行为是通过AJAX加载外部URI中的内容。

不知道为什么需要这样做，因为这会破坏选项卡式窗格的用途，用户可能不希望完全刷新窗口

选项卡公开了一个可挂接到的select事件。然后，您可以使用一些逻辑（检查链接是否有特定的css类或url是否是特定的页面等）来决定是否遵循默认的ajax行为，即在浏览器中实际跟踪链接

$("#tabs").tabs({

        select: function(event,ui) {
            var url = $.data(ui.tab, 'load.tabs');

            if (url==='somepage'){
                //follow the link
                window.location.href=url;
                return false;
            }

        }
});​

---

我自己解决了这个问题

HTML:

---

基于选项卡中链接类的解决方案

<ul class="">
   <li class=""><a href="http://www.example.com/#tabs-1" rel="">Tab 1</a></li>
   <li class="ajax-disabled"><a href="http://www.example.com/anotherpage.php#tabs-1">Tab 2</a></li>
</ul>

---

当用户单击类为“ajax disabled”的选项卡时，将加载新页面。

我知道这是一个老问题，但我在尝试解决大致相同的问题时遇到了这个问题，并提出了不同的解决方案。从我收集的信息来看，您想要jQuery选项卡的外观和感觉，但希望保留选项卡中链接的默认浏览器行为，以启动其他页面。我需要类似的功能，每个选项卡都有页面，每个页面都显示选项卡列表，我只想使用选项卡中的锚元素前后链接，我不希望jQuery选项卡执行任何Ajax等操作

以下几点对我有用

给定以下html：

<div id="tabs">
    <ul>
        <li><a href="Page1.html">Page 1</a></li>
        <li><a href="Page2.html">Page 2</a></li>
        <li><a href="Page3.html">Page 3</a></li>
        <li><a href="Page4.html">Page 4</a></li>
    </ul>
</div>

---

您可以在不使用javascript的情况下使用普通链接创建选项卡，如下所示：

<div id="tabs">
    <ul>
        <li><a href="#one"><span>Anchor tab</span></a></li>
        <li><a href="http://example.com/ajax"><span>Ajax tab</span></a></li>
        <li class="noajax"><a></a><a href="http://example.com/no-ajax" class="ui-tabs-anchor"><span>Link tab</span></a></li>
        <style>
        .noajax a:first-child {
            display: none;
        }
        </style>
    </ul>
</div>

第一个孩子{
显示：无；
}

这里的第三个选项卡将用作普通链接。这项工作由三部分组成：

选项卡

开头的诱饵

。JQueryUI将把它的ajax加载函数绑定到它，让第二个

作为一个普通链接

使用

a:first child

隐藏诱饵

选项卡的真实

是给定的

class=“ui tabs anchor”

，因此它接受正确的样式处理

---

您希望页面的行为如何？问题不清楚。请在您的答案中添加一些解释，以便其他人知道您的解决方案比其他人更好。只有代码的答案并没有完全的帮助。

$('#tabs').tabs({
   select: function(event,ui) {
      if($(ui.tab).hasClass('ajax-disable')){
         window.location.href = ui.tab.href;
         return false;
      }
   }
});

<div id="tabs">
    <ul>
        <li><a href="Page1.html">Page 1</a></li>
        <li><a href="Page2.html">Page 2</a></li>
        <li><a href="Page3.html">Page 3</a></li>
        <li><a href="Page4.html">Page 4</a></li>
    </ul>
</div>

var sUrl = window.location.href;
var $tabs = $("#tabs");

$tabs.tabs({
    beforeLoad: function (event, ui)
    {
        //Prevent the tab loading logic from executing
        return false;
    }
}).find("li a").each(function ()
{
    var $tablink = $(this);

    //Remove the click event, which will revert to the browser handling the click, not the jQuery tab javascript
    $tablink.unbind('click');

    //If the current page url contains the tab href then select it.
    if (sUrl.toLowerCase().indexOf($tablink.attr("href").toLowerCase()) > -1)
    {            
        //Get the index of the li element within the ol or ul element.
        var index = $tablink.parent().index();

        //Select the tab
        $tabs.tabs('option', 'active', index);
    }
});

$('#tabs').tabs({
        beforeLoad: function( event, ui ) {
            // Prevent the tab loading logic
            return false;
        },
        create: function( event, ui ) {
            $(ui.tab[0]).parent('ul').parent().find('[role="tabpanel"]:empty').remove();
            $(ui.tab[0]).parent('ul').find('li').each(function () {
                var href = $(this).find('a').attr('href');
                $(this).find('a').parent('li').attr('aria-controls', href.replace(/#/, ''));
                $(this).attr('aria-selected') === 'true' ? $(href).attr('role', 'tabpanel') : $(href).attr('role', 'tabpanel').hide();
            });
        }
    });

<div id="tabs">
    <ul>
        <li><a href="#one"><span>Anchor tab</span></a></li>
        <li><a href="http://example.com/ajax"><span>Ajax tab</span></a></li>
        <li class="noajax"><a></a><a href="http://example.com/no-ajax" class="ui-tabs-anchor"><span>Link tab</span></a></li>
        <style>
        .noajax a:first-child {
            display: none;
        }
        </style>
    </ul>
</div>