0

В jQuery UI есть возможность спрятать весь tab-content, а как это сделать в Bootstrap Tabs?

$('.nav-tabs > li').mouseout( function(){
   $(this).find('a').tab('hide');
});

вот такая запись не дает необходимого результата

1
  • Вам нужно скрывать только текущий таб, с которого уходит указатель мыши или все табы когда с какого-либо уходит указатель мыши?
    – Alex
    Commented 23 февр. 2016 в 4:21

1 ответ 1

1

В jQuery UI есть возможность спрятать весь tab-content, а как это сделать в Bootstrap Tabs?

$('.nav-tabs > li').mouseout( function(){
    $(this).removeClass('active');
    $(".tab-content").find($(this).find("a").attr("href")).removeClass('active');
});

JsFiddle


UPD по вопросу из комментариев

пользователь наводит мышь на ссылку, открывается контент, и он может водить, кликать по контенту, но как только клик за пределами табов, контент автоматически срывается.

$('.nav-tabs > li').hover(
function(){
    $(this).find("a").tab('show');
},
function(){
    if(!$($(this).find("a").attr("href")).is(":hover")){
        $(this).removeClass('active');
        $(".tab-content").find($(this).find("a").attr("href")).removeClass('active');
    }
});

$('.tab-content').mouseout( function(){
    $('.tab-content > .tab-pane').removeClass("active");
    $('.nav-tabs > li').removeClass("active");
});

JSFiddle

15
  • работает, но не совсем так, когда наводим на ссылку (hover), контент должен появляться, а если ховер мимо кнопок то закрывается весь контент. На старте весь контент спрятан.
    – invited
    Commented 23 февр. 2016 в 7:55
  • @zorro под ссылкой Вы подразумеваете tab (nav-tabs > li), а под контентом контент для tab ?
    – Alex
    Commented 23 февр. 2016 в 9:05
  • да, но смотрите, если мышей навести на контент, то он также будет виден при этом (нет жесткой привязки только к ссылке)
    – invited
    Commented 23 февр. 2016 в 9:08
  • 1
    @zorro события разные и да, возможно показывать разные контенты, но это не совсем правильно если Вы используете bootstrap, да и зачем такие извращения?
    – Alex
    Commented 23 февр. 2016 в 9:18
  • 1
    @zorro все зависит от Вашего кода, можно и на jquery без bootstrap, можно и при помощи bootstrap. на вкус и цвет...
    – Alex
    Commented 23 февр. 2016 в 9:41

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.