Bootstrap / jQuery：在导航栏中滑动“活动”状态

Posted 2023-03-06

【中文标题】Bootstrap / jQuery：在导航栏中滑动“活动”状态

【英文标题】：Bootstrap / jQuery: Slide "active" state in navbar

【发布时间】：2013-09-06 18:37:10

【问题描述】：

在 Bootstrap 3 导航栏中，您可以将元素标记为活动：

使用 jQuery，我可以创建一个简单的函数来在点击时将活动状态从一个元素“切换”到另一个元素。

$('li').click(function() 
    if ( ! $(this).hasClass('active')) 
        $('li.active').removeClass('active');
        $(this).addClass('active');
        // Do more stuff here
    
);

完整示例：http://jsfiddle.net/zEh3h/2/

现在我想要实现的是在点击时从一个元素到另一个元素的深灰色背景的“幻灯片”效果。它也应该在响应式垂直模式下工作。

有没有一种引导原生的方式来实现这一点？或者也许是一个 jQuery 解决方法？我在文档中找不到任何关于此的内容。

【参考方案1】：

也许是这样的：

$('li').click(function() 
    if ( ! $(this).hasClass('active')) 
        $('li.active').removeClass('active');
        $(this).addClass('active');
        offsetTop = $(this).offset().top - $('.nav').offset().top;
        offsetLeft = $(this).offset().left - $('.nav').offset().left;
        $('.nav-background').animate(
            top: offsetTop,
            left: offsetLeft,
            right: $('.nav').width() - $(this).width() - offsetLeft,
            bottom: $('.nav').height() - $(this).height() - offsetTop 
        , 'slow', 'linear');
    
);

当视图从响应式垂直模式改变或返回时，您仍然需要更新背景的位置。

jsFiddle：Example