Question

使用jQuery UI标签时，如何为一个或两个选项卡禁用AJAX功能？

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

Answer 1

不确定为什么你需要这个，因为它会破坏选项卡式窗格的目的，但用户可能不会期望完整的窗口刷新...

选项卡显示您可以挂钩的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;
            }

        }
});

Answer 2

基于标签

中的链接类的解决方案

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

和JS：

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

当用户点击“ajax-disabled”类的标签时，将加载新页面。

Answer 3

我自己解决了这个问题......

HTML：

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top"><a href="#tabs-1" rel="http://www.example.com/">Tab 1</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#tabs-1" rel="http://www.example.com/">Tab 2</a></li>
</ul>

JS：

$('#tabs').tabs({
    select: function(event, ui) {
        var uri = ui.tab.rel;
        if( uri ) {
            location.href = uri;
            return false;
        }
        return true;
    }
});

Answer 4

我知道这已经过时了，但我偶然发现了这个问题，因为我试图解决大致相同的问题，并提出了不同的解决方案。从我收集的内容来看，您需要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：

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);
    }
});

Answer 5

$('#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();
            });
        }
    });

Answer 6

您可以创建一个不带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>

此处的第三个标签将用作普通链接。这项工作分为三个部分：

标签<a>开头的诱饵<li>。 JQueryUI会将其ajax加载功能与其绑定在一起，剩下的第二个<a>可以用作普通链接。
使用a:first-child隐藏了诱饵。
该标签的真实<a>被赋予class="ui-tabs-anchor"，因此它接受了正确的样式处理。

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

6 个答案: