jquery UI Tabs - 在幻灯片更改时运行脚本

Question

我已经搜索并阅读了多个论坛，但我似乎无法解决这个问题。

设置：我在其中一个选项卡中设置了一个简单的 jquery 音频播放器。当有人单击歌曲标题时，它会在名为#gs-audio 的 div 中播放该音频。如果他们单击另一首歌曲标题，它会更改曲目，或者，如果他们重新单击同一首歌曲，它会暂停音频。

问题：如果有人点击另一个标签，音频会继续播放

我的尝试：

$(".tabs-outter-wrapper").tabs({
    show: { effect: "slide", duration: 800, direction: "right" },
    hide: { effect: "slide", duration: 800, direction: "left" },
    show: function(event, ui) {
            var audioElement = document.getElementById("gs-audio"),
                current = audioElement.getAttribute("src");
    
        if (typeof current !== typeof undefined && current !== false) {
            audioElement.pause();
        }
    }
});

我尝试将第二个 show 更改为 activate，但似乎都不起作用。

Answer 1

您的想法是正确的，因为您需要运行一些逻辑来在选项卡更改时更新音频元素的状态，但是您没有使用正确的属性。

show 用于设置选项卡更改时动画的使用方式。您需要改用activate 或beforeActivate：

var audioElement = document.getElementById("gs-audio");

$(".tabs-outter-wrapper").tabs({
  show: {
    effect: "slide",
    duration: 800,
    direction: "right"
  },
  hide: {
    effect: "slide",
    duration: 800,
    direction: "left"
  },
  activate: function(e, ui) {
    audioElement.pause();
  }
});

请注意，不需要if 条件来检查audio 的当前URL 以查看它是否已经在播放，只需pause() 即可。