2
ビデオを再生するタブを作成し、他のビデオを再生するために他のタブをクリックしている間にページを更新する必要があります。同じページに残り、ページをリロードするスクリプトを添付しましたが、リロードしてビデオを一時停止するのではなく、まもなく再ロードします。タブ上のページを更新するブートストラップをクリック
タブ全体でページを更新しないでください。
HTMLパート：
<div id="tabs-list">
<ul class="nav nav-tabs nav-justified" id="myTab">
<li class="active"><a href="#t1" data-toggle="tab">Live 1</a></li>
<li><a href="#t2" data-toggle="tab">Live 2</a></li>
<li><a href="#t3" data-toggle="tab">Live 3</a></li>
<li><a href="#t4" data-toggle="tab">Live 4</a></li>
</ul>
<div class="tab-content">
<div id="t1" class="tab-pane fade in active"><?php echo get_post_meta($post->ID, 'live1', true); ?></div>
<div id="t2" class="tab-pane fade"><?php echo get_post_meta($post->ID, 'live2', true); ?></div>
<div id="t3" class="tab-pane fade"><?php echo get_post_meta($post->ID, 'live3', true); ?></div>
<div id="t4" class="tab-pane fade"><?php echo get_post_meta($post->ID, 'live4', true); ?></div>
</div>
</div>
スクリプト：
<script type="text/javascript">
$(document).ready(function() {
$('#tabs-list').click(function() {
location.reload();
});
});
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
</script>
質問の説明を改訂してください。私の理解は - 新しいタブがクリックされたときにページがリフレッシュされず、最初のタブのビデオがまだ再生されています...これは正しいですか？ – wahwahwah
ページは更新されますが、短くなります。そのため、ブラウザで手動で更新するときに、まだ再生されているビデオを – FRQ6692
に更新する必要があります。 – FRQ6692