切换并加载一个选项卡从许多
问题描述:
我怎样才能设置代码使用JavaScript或JQuery加载一个选项卡只有每次,在此代码中的所有标签所有加载在一次,并需要在同一时间太多内存,特别是当Story长于2000个字母时,所以有三个部分,页面会同时加载6000个字母,我只想加载一个部分,而当我切换到另一个Tab时,以前的选项卡会消失并且只显示只有2000字母的新标签。切换并加载一个选项卡从许多
<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>
我的数据库是
[ Title -- Part1 -- Part2 -- Part3 ]
[Part 1 -- LoremIpusem -- LoremIpusem -- LoremIpusem]
[Part 2 -- LoremIpusem -- LoremIpusem -- LoremIpusem]
[Part 3 -- LoremIpusem -- LoremIpusem -- LoremIpusem]
请给我只是如何做到这一点的至少两个标签一个个例,我已经检查这个code但我意识到如果它被加载一次,它保持加载
答
你可以添加一个占位符data-src
,当用户clic标签上KS切换源:
<audio id="sound1" preload="auto" data-src="http://www.jezra.net/audio/skye_boat_song.ogg" controls></audio>
$(".nav-tabs a").click(function() {
var tab = $(this).attr('href');
var $el = $(tab).find('audio');
var src = $el.data('src');
$el.attr('src', src);
})
https://jsfiddle.net/vtu8pz6y/
如果要动态播放,暂停等:
$el[0].play()
$el[0].pause()
这是完美的,但是如果我播放了音频,那么移动到另一个Tab,T他的音频将继续播放,如果我返回到音频播放音频停止的相同的前一个选项卡,可以解决这个问题吗?我想让另一个Tab停止前一个音频,而不是返回到Tab。 –