我是第一次使用 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>
最佳答案
检查这个 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 了解更多信息..
关于javascript - 当我选择另一个选项卡时，选项卡内容不会淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30454688/