从多个选项卡切换和加载一个选项卡答案

【问题标题】：Switching and Loading One Tab from Many从多个选项卡切换和加载一个选项卡
【发布时间】：2017-04-14 16:56:11
【问题描述】：

如何使用 Javascript 或 JQuery 设置代码以每次仅加载一个选项卡，在此代码中，所有选项卡都一次加载，同时占用太多内存，特别是当故事长于2000 个字母，所以三个部分，页面将同时加载 6000 个字母，我只想加载一个部分，当我切换到另一个选项卡时，前一个选项卡会消失，只显示只有 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，但我意识到如果它被加载一次，它就会保持加载状态

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

您可以添加一个占位符data-src，当用户点击选项卡时切换src：

<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

【讨论】：

这是完美的，但是如果我播放了音频，然后移动到另一个选项卡，音频将继续播放，如果我返回到音频正在播放的同一个选项卡，音频停止，可以这可以解决吗？我想让只是移动另一个选项卡停止以前的音频，而不是返回到选项卡。