Js，Bootstrap：每次打开选项卡时都执行操作答案

【问题标题】：Js, Bootstrap: Do action each time while opening tabJs，Bootstrap：每次打开选项卡时都执行操作
【发布时间】：2015-11-29 13:48:53
【问题描述】：

我在 Bootstrap 选项卡中创建动画，每次选择每个选项卡时动画都应该起作用。但是动画只在第一次工作，如果我打开其他选项卡并返回同一个选项卡，它就不起作用了。

当然，当我选择标签时，我会用动画显示新价格，但当我选择其他标签并返回同一标签时，它不会重复。

在此处查看实际操作：https://jsfiddle.net/jn9v3j1c/

HTML：

 <div class="price">
             <h2 class="heading price-old">300</h2>
             <h2 class="heading fade price-discount">90</h2>
        </div>

JS：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href") // activated tab

    if (e.target) {
        $(this).siblings().children('.price-old').animate({
            fontSize: "30px"
        });
        $('.price-discount').addClass('in');
    }

});

请不要过多评价我的代码，我是在 JS 中完成我的第一步 :) 谢谢

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

经过几次修复后，它似乎确实有效。

首先，jQuery 回调中的this 指的是捕获事件的元素。在这里，它是 a 元素，但您不想要 a 元素的 siblings。你想寻找标签本身：

var tab = $($(this).attr("href"));

接下来，.price-old 不是（直接）孩子，它是后代，您应该使用 find 方法：

tab.siblings().find('.price-old').animate({
        fontSize: "30px"
    });

然后好像可以了，只有30px是原来的大小，所以我改成20-fiddle

【讨论】：

感谢您的回答，这对我有点帮助，顺便说一句，我的主要问题仍然存在。每次点击标签时字体大小和 90 都不会更新，当我切换到第 2 个标签然后返回第 1 个时，我已经看到 90，但是只有在选择他的父标签后它才会出现动画（粗鲁地说它应该被删除切换另一个选项卡并在我选择其父选项卡时再次出现）
对不起：（我不知道你想得到什么结果。你能再解释一下吗？
对不起，也许我描述得不好。看到这个小 gif gyazo.com/c1c1a7a8f06eb2f658db25376c7a68d6 。当我刷新页面并切换选项卡“个人资料”时，出现“90”，这很好。但是当我切换选项卡“消息”时，90 应该再次隐藏并以动画形式出现。所以应该再次重复相同的动作，比如刷新页面之后。这有意义吗？
太棒了！无法猜测我通常为所有选项卡更改类。只有一个小问题，动画只有在你第一次打开标签时才起作用，有没有解决方案可以每次都显示它，而不仅仅是第一次？
显然siblings 是不必要的。

【解决方案2】：

请尝试this 小提琴。我已经让 90 上的动画在你每次再次点击标签时重新出现。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var target = $(e.target).attr("href") // activated tab

    if (e.target) {
        var tab = $($(this).attr("href"));
        tab.find('.price-old').animate({
            fontSize: "20px"
        });
        tab.find('.price-discount').addClass('in');
    }



});

【讨论】：