Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with tabs plugin #18694

Closed
AustinWinstanley opened this issue Dec 26, 2015 · 8 comments
Closed

Problem with tabs plugin #18694

AustinWinstanley opened this issue Dec 26, 2015 · 8 comments
Labels

Comments

@AustinWinstanley
Copy link

Hide doesn't exist and 'Active' class isn't removed from previous links.

Previous working (now broken) code:

$('.tab-link').mouseenter(function (e) {
    $(this).tab('show');
});

$('.tab-link').mouseleave(function (e) {
    $(this).tab('hide');
});

Working Workaround code:

$('.tab-link').mouseenter(function (e) {
    $('.tab-link').removeClass('active');
    $(this).tab('show');
});
@cvrebert
Copy link
Collaborator

Please post a JS Bin or JS Fiddle that demonstrates the problem.

@AustinWinstanley
Copy link
Author

@Johann-S
Copy link
Member

As it said on the error console tab doesn't have hide method see : https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tab.js

To hide a tab you just have to show an other one

@AustinWinstanley
Copy link
Author

@cvrebert cvrebert changed the title Tab Hide on hover/mouseleave throws Uncaught Error: No method named "hide" Problem with tabs plugin Dec 27, 2015
@cvrebert
Copy link
Collaborator

Works fine when implemented according to the docs:
https://jsfiddle.net/cvrebert/4L4ktLxy/

@nimmolo
Copy link

nimmolo commented Mar 12, 2016

@cvrebert You're right, tabs do work fine when implemented exactly according to docs but i'm still trying to understand why Bootstrap nav classes are necessary to the markup. Does tab.js need the Bootstrap nav classes? I can't see that it does when reading through the script.

It seems the Bootstrap nav classes were all @AustinWinstanley was missing, and when I add them, his jsfiddle works. Why do the nav classes make it work?

The question came up for me on a development site, I have tabs working without nav markup on two different pages, but on the third i'm running into the exact same behavior as his Dec. 26 jsfiddle. Without Bootstrap nav classes you can tab to Tab-2 but relatedTarget (i.e. the previous tab) is not hidden. You can't go back to Tab-1 from Tab-2, and Tab-1 is not itself hidden when you go to Tab-2.

update: ah, there is another acknowledged and resolved issue involved in my development site, the selector has to be in an <ul> and not an <ol>.

@cvrebert
Copy link
Collaborator

Does tab.js need the Bootstrap nav classes?

Certainly that's the only usage which we officially support; you're on your own otherwise. We'll be relying on the nav classes more once #17754 gets fixed.
Probably the .active class is what's currently key here, but I'm not going to spend time tracing thru the code to verify that.

@nimmolo
Copy link

nimmolo commented Mar 12, 2016

Thanks @cvrebert -
I am using an <ol> and tabs works once I apply @daleparkerwinston's patch for #17754.

The OP's issue is still a mystery to me as tab.js is only selecting for ul:not(.dropdown-menu)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants