Question

是否可以通过单击选项卡来加载动态选项卡的内容？我希望能够在选项卡中播放视频，当您单击另一个选项卡时，先前停靠/取消的视频并加载新选项卡的内容

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
    <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <iframe width="100%" height="315" src="https://www.youtube.com/embed/xcJtL7QggTI" allowfullscreen></iframe>
    </div>
    <div id="menu1" class="tab-pane fade">
      <iframe width="100%" height="315" src="https://www.youtube.com/embed/S-thTTqefls" allowfullscreen></iframe>
    </div>
    <div id="menu2" class="tab-pane fade">
      <iframe width="100%" height="315" src="https://www.youtube.com/embed/E5ln4uR4TwQ" allowfullscreen></iframe>
    </div>
    <div id="menu3" class="tab-pane fade">
      <iframe width="100%" height="315" src="https://www.youtube.com/embed/uNVJQCGxqb0" allowfullscreen></iframe>
    </div>
  </div>
</div>

Answer 1

您必须从此处（https://github.com/cferdinandi/tabby）导入tabby.js和tabby.css文件。 tabby.js和tabby.css文件位于dist文件夹中。

<html>
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="./tabby.css">
      <script src="./tabby.js"></script>
    </head>
    <body>
       <div class="container">
         <ul data-tabs class="nav nav-tabs">
           <li class="active"><a data-tab href="#taba">Home</a></li>
           <li><a data-tab href="#tabb">Menu 1</a></li>
           <li><a data-tab href="#tabc">Menu 2</a></li>
         </ul>
         <div data-tabs-content>
           <div data-tabs-pane class="tabs-pane active" id="taba">
            <iframe width="100%" height="315" src="https://www.youtube.com/embed/xcJtL7QggTI" allowfullscreen></iframe>
           </div>
           <div data-tabs-pane class="tabs-pane" id="tabb">
            <iframe width="100%" height="315" src="https://www.youtube.com/embed/S-thTTqefls" allowfullscreen></iframe>
           </div>
           <div data-tabs-pane class="tabs-pane" id="tabc">
            <iframe width="100%" height="315" src="https://www.youtube.com/embed/E5ln4uR4TwQ" allowfullscreen></iframe>
           </div>
         </div>
       </div>
    <script>
        tabby.init();
    </script>
    </body>
    </html>

仅在处于活动状态时如何加载Bootstrap动态选项卡内容？

1 个答案: