<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#part1" role="tab">Part 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#part2" role="tab">Part 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#part3" role="tab">Part 3</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="part1" role="tabpanel"><b>Story Part 1</b> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. Libero fuga, suscipit eos rem voluptatibus. Itaque sequi quaerat quidem doloribus. <br> BGM: <br><audio controls>
<source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg">
</audio>
</div>
<div class="tab-pane" id="part2" role="tabpanel"><b>Story Part 2</b> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. Libero fuga, suscipit eos rem voluptatibus. Itaque sequi quaerat quidem doloribus. <br> BGM: <br><audio controls>
<source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg">
</audio></div>
<div class="tab-pane" id="part3" role="tabpanel"><b>Story Part 3</b> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. Libero fuga, suscipit eos rem voluptatibus. Itaque sequi quaerat quidem doloribus. <br> BGM: <br><audio controls>
<source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg">
</audio></div>
</div>
当我切换到其他tab时，如何关闭||刷新上一个BGM以阻止tab播放？更清楚一点，如果我从part1标签启动BGM，然后点击part2标签，part1的音乐仍然有效，我想刷新所有标签，如果它根本没有工作，只有一个选定的标签可以工作。
答案 0 :(得分：2)
看看JS，我添加了标签更改事件。您还可以比较选项卡目标以执行特定选项卡的某些特定操作。
您需要为活动下的视频，音频暂停事件添加代码。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
//alert('event')
/* something like this to pause audio or video */
$('video').trigger('pause');
$('audio').trigger("pause");
if ((target == '#part2')) {
//alert('ok');
} else {
//alert('not ok');
}
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#part1" role="tab">Part 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#part2" role="tab">Part 2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#part3" role="tab">Part 3</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="part1" role="tabpanel"><b>Story Part 1</b> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. Libero fuga, suscipit eos rem voluptatibus. Itaque sequi quaerat quidem doloribus. <br> BGM: <br><audio controls>
<source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg">
</audio>
</div>
<div class="tab-pane" id="part2" role="tabpanel"><b>Story Part 2</b> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. Libero fuga, suscipit eos rem voluptatibus. Itaque sequi quaerat quidem doloribus. <br> BGM: <br><audio controls>
<source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg">
</audio></div>
<div class="tab-pane" id="part3" role="tabpanel"><b>Story Part 3</b> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aliquam ab esse amet quam, alias commodi laboriosam nemo voluptates. Libero fuga, suscipit eos rem voluptatibus. Itaque sequi quaerat quidem doloribus. <br> BGM: <br><audio controls>
<source src="https://freemusicarchive.org/music/listen/156afda13aef642c35b844c21681ad44002b8e88" type="audio/mpeg">
</audio></div>
</div>