<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时，如何关闭||刷新之前的tab来停止播放BGM？更清楚一点，如果我从 part1 选项卡开始背景音乐，然后单击 part2 选项卡，part1 中的音乐仍然有效，我想要刷新所有选项卡，就像它根本不起作用一样，只有一个选定的选项卡可以工作。
最佳答案
查看 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>关于javascript - Bootstrap 一个选定的触发选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43375523/