切换并加载一个选项卡从许多

我怎样才能设置代码使用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但我意识到如果它被加载一次，它保持加载

来源

2017-04-14 Calibur Victorious

你可以添加一个占位符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()

More info here

来源

2017-04-14 17:47:02

这是完美的，但是如果我播放了音频，那么移动到另一个Tab，T他的音频将继续播放，如果我返回到音频播放音频停止的相同的前一个选项卡，可以解决这个问题吗？我想让另一个Tab停止前一个音频，而不是返回到Tab。 –

切换并加载一个选项卡从许多

回答

相关问题