带有会话的 JavaScript 选项卡

Question

我不知道该如何描述。我需要带有视频播放器嵌入代码的标签。例如，我有两个选项卡：tab1 和 tab2。当用户单击 tab1 并播放视频时，两个选项卡都显示视频播放器，并且不停止此用户单击 tab2 并播放 tab2 中的视频，但 tab1 一个视频也在播放。当用户切换标签时需要帮助自动停止 tab1 播放器。

Answer 1

如果你的标签是按钮，你可以使用

$('.tab1 + button').on('click', function() { //Selects button immediately after `<div class="tab1">`
    var video = $('.tab2 video')[0]; //Get first <video> in selection as DOM Element so that we can use the `pause` function on it
    video.pause()
    //Play the video from tab 1
    $('.tab1 video')[0].play();
});

这将选择具有tab1 类的元素并暂停tab2 中的<video>

$('.tab2 + button').on('click', function() { //Selects button immediately after `<div class="tab2">`
    var video = $('.tab1 video')[0];
    video.pause()
    //Play the video from tab 2
    $('.tab2 video')[0].play();
});

这会选择具有tab2 类的元素，并暂停tab1 中的<video>

我使用$('.tab1 video')[0] 而不仅仅是$('.tab1 video') 的原因 是因为包含 [x]（其中 x = 0 或任何索引）会将 jQuery 对象转换为普通的 JavaScript DOM 元素，以便您可以在其上调用 .play() 和 .pause()。 如果你的标记有点类似于

，你可以使用上面的 javascript

<div class="tab1">
    <video src="myvideo.mp4"></video>
</div>
<button>Open tab 1</button>

<div class="tab2">
    <video src="myvideo.mp4"></video>
</div>
<button>Open tab 2</button>

标签是<div> 元素，您的按钮紧跟在按钮应该打开的标签之后（因为我使用了+ 选择器） 请include your HTML，以便我更好地回答这个问题。