Question

我正在使用第一次bootstrap来建立一个网站。我一直试图制作一盒不同的多媒体内容，这些内容会在用户需要时发生变化。

我在bootstrap中开发了这个代码，它有两个问题：

淡入时的内容不会替换以前的内容在前一个位置后面的位置。
单击另一个标记元素时，元素不会淡出。

以下示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=2">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container" id="main">
       <ul class="nav nav-tabs">
           <li class="active"><a data-toggle="tab" href="#texto">Texto</a></li>
           <li><a data-toggle="tab" href="#imagen">Imagen</a></li>
           <li><a data-toggle="tab" href="#video">Video</a></li>
           <li><a data-toggle="tab" href="#ppt">PPT</a></li>
       </ul>
       <div class="tab-content">
           <div id="texto" class="tab-pane fade in active">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
           </div>
           <div id="imagen" class="tab-pane fade">
               <img src="27042015_logo1_600x600.jpg" width="450" height="400" alt="foto"> </div>
           </div>
           <div id="video" class="tab-pane fade out">
               <iframe width="560" height="315" src="https://www.youtube.com/embed/xMSjtcNdi8I" frameborder="0" allowfullscreen></iframe>
           </div>
           <div id="ppt" class="tab-pane fade">
               <iframe src="http://www.slideshare.net/HubSpot/slideshelf" width="615px" height="470px" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:none;" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
           </div>
       </div>
    </div>
    </body>
    </html>

Answer 1

选中 DEMO 可以正常工作..

 <ul class="nav nav-tabs" role="tablist" id="myTab">
  <li role="presentation" class="active"><a href="#texto" aria-controls="texto" role="tab" data-toggle="tab">Texto</a></li>
  <li role="presentation"><a href="#imagen" aria-controls="imagen" role="tab" data-toggle="tab">Imagen</a></li>
  <li role="presentation"><a href="#video" aria-controls="video" role="tab" data-toggle="tab">Video</a></li>
  <li role="presentation"><a href="#ppt" aria-controls="ppt" role="tab" data-toggle="tab">PPT</a></li> 
</ul>

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="texto"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
  <div role="tabpanel" class="tab-pane" id="imagen"><img src="27042015_logo1_600x600.jpg" width="450" height="400" alt="foto"></div>
  <div role="tabpanel" class="tab-pane" id="video"> <iframe width="560" height="315" src="https://www.youtube.com/embed/xMSjtcNdi8I" frameborder="0" allowfullscreen></iframe></div>
  <div role="tabpanel" class="tab-pane" id="ppt"> <iframe src="http://www.slideshare.net/HubSpot/slideshelf" width="615px" height="470px" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:none;" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div>
</div>

请参阅 Site 以获取更多信息..

当我选择其他标签时，标签内容不会淡出

1 个答案: