Question

I'm working on project which is using Jquery Tabs. My tabs have links. One of them is to ids on this page which enable to show specific hidden element,

<a href="#rings">Rings</a>

and one of them is just simple links to another page,

<a href="/amulets">Amulets</a>

Here is how they are creating:

$('.b-head-nav-tabs').parent().tabs({
    collapsible: true,
    active: false,
    show: { effect: 'slideDown', duration: 300 },
    hide: { effect: 'slideUp', duration: 100 }
});

And I need to prevent default tabs action and enable user to go to the specific link if he clicks on it bypassing all Jquery Tabs magic. I tried to make specific tabs disabled like that,

var disabledTabsString = $('.disabled-tabs').text();
var disabledTabsArray  = disabledTabsString.split('');
for (var i = 0; i < disabledTabsArray.length; i++) {
    disabledTabsArray[i] = parseInt(disabledTabsArray[i]);
}
...
disabled: disabledTabsArray,

But it makes specific tabs disabled even if they have links to go. Any ideas?

Answer 1

我决定将data-url属性添加到我想要直接转到的特定网址。然后，我使用beforeActivate方法检查是否有data-url，然后将用户重定向到此链接。

$('.b-head-nav-tabs').parent().tabs({
        collapsible: true,
        active: false,
        show: { effect: 'slideDown', duration: 300 },
        hide: { effect: 'slideUp', duration: 100 },
        beforeActivate: function( event, ui ) {
            var url = $('a', ui.newTab).attr('data-url');
            if (url != undefined) {
                document.location = url;
                return false;
            }
        }
    });

Prevent dafault action in Jquery tabs

1 个答案: