觸發一個選項卡僅每一次

在這裏我的代碼，我想說明一個故事，每一個標籤都有自己text和Background Music，這裏的問題是，當我打開標籤part1並打開music，然後移動到標籤part2， music from part1仍然有效，如果我開始全部tabsmusic所有3 BGMs將同時運行，我怎樣才能保持1 tab只有活動？觸發一個選項卡僅每一次

$('#myTab a').click(function(e) { 
 
    e.preventDefault() 
 
    $(this).tab('show') 
 
})

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

來源

2017-04-12 Calibur Victorious

聽起來像是你需要實現停止音樂，爲了把這個當你切換選項卡選擇其他功能。

編輯：您可能必須手動啓動每個音頻元素切換標籤

$('#myTab a').click(function(e) { 
     e.preventDefault() 
     musicStop(); 
     $(this).tab('show') 
    }) 

function musicStop(){ 
    //stop all audio playing 
    $.each($('audio'), function() { 
     $(this).stop(); 
    }); 
}

來源

2017-04-12 15:14:49 Seano666

沒有工作對我來說，有沒有辦法關閉整個標籤的時候？ –

你可以在你的問題中製作一個JSFiddle並鏈接到它嗎？我不清楚你是如何期待它的工作，以及它現在的樣子。 – Seano666

我做了片段，我的問題是，如果我開始Tab1音樂然後移動到Tab2，Tab1仍然活動，音樂播放，並且我想關閉除選定選項卡以外的所有選項卡。 –

觸發一個選項卡僅每一次

回答

相關問題