爽やかなオーディオ、ビデオ、GIF＆インラインフレームonclickのブートストラップの丸薬とタブ

<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"><iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/62576046&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe></div> 
 
     <div class="tab-pane" id="part3" role="tabpanel"><iframe width="560" height="315" src="https://www.youtube.com/embed/qycqF1CWcXg" frameborder="0" allowfullscreen></iframe></div> 
 
    </div>

？ここで私のコードでビデオやオーディオを開始したら、別のタブに移動し、ビデオとオーディオは機能し続け、タブ全体をリフレッシュしたい場合はタブ全体をリフレッシュしてください。

出典

2017-04-12 Calibur Victorious

1つのDOM要素に「タブ」があります.Javascriptで選択して内容を保存して戻すことができます。そのタブ内のすべての文字は、文字通り既存のものを一時停止します。

出典

2017-04-12 20:50:26 WIPocket

例をご理解ください。 –

新しいタブに行くときは 'var tab = $（"＃TabToRefresh "）のようなものを使います; var val = tab.html（）; tab.html（ ""）; tab.html（val）; ' – WIPocket

爽やかなオーディオ、ビデオ、GIF＆インラインフレームonclickのブートストラップの丸薬とタブ

答えて

関連する問題