时间戳

首页 > 解决方案 > jquery UI Tabs - 在幻灯片更改时运行脚本

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

问题描述

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

设置：我在其中一个选项卡中设置了一个简单的 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但似乎都不起作用。

标签： jqueryuser-interfacetabs

解决方案

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

show用于设置选项卡更改时动画的使用方式。您需要使用activateorbeforeActivate代替：

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检查 的当前 URLaudio以查看它是否已经在播放，pause()不管它。

推荐阅读