切換並加載一個選項卡從許多

我怎樣才能設置代碼使用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。 –

切換並加載一個選項卡從許多

回答

相關問題