引導一個選擇觸發選項卡

<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以停止播放BGM當我切換到其他tab？要更清楚，如果我從part1選項卡啓動BGM，然後點擊part2選項卡，part1的音樂仍然可以工作，我想刷新所有選項卡，如果它根本不工作，只有一個選定的選項卡工作。

來源

2017-04-12 Calibur Victorious

要停止播放以前的活動標籤的音頻文件，選擇另一個選項卡後，是否正確？ – Webinion

是的，但我可能會放一些GIF和視頻和畫廊，所以它會更好，如果當我切換到其他選項卡它不會在後臺的性能。 –

Bootstrap提供標籤更改的回調事件，但您需要通過自己的代碼執行音頻，視頻停止。 – Webinion

看過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>

來源

2017-04-12 17:27:06 Webinion

我不認爲這是按預期工作，音頻仍在播放 –

我告訴過你，你需要爲音頻和視頻文件暫停添加代碼。 – Webinion

@ CaliburVictorious，音頻文件暫停完成，我已經在回答中更改了我的代碼腳本，請看看 – Webinion

引導一個選擇觸發選項卡

回答

相關問題