Javascript 选项卡内容不存在'；当我选择另一个标签时，它不会消失_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 选项卡内容不存在'；当我选择另一个标签时，它不会消失

javascript jquery html css twitter-bootstrap

Javascript 选项卡内容不存在'；当我选择另一个标签时，它不会消失,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我第一次使用bootstrap来建立一个网站。我一直在尝试制作一盒不同的多媒体内容，用户需要时可以更改我在bootstrap中开发了这段代码，它有两个问题：淡入时的内容不会替换以前的内容，而是位置落后于前一个位置当我在另一个标记元素中单击时，这些元素不会淡出示例如下： <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</tit

我第一次使用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>


引导示例






知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

检查此工作正常

 <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>







知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利

有关更多信息，请参阅此。

@Kawinesh SK:编辑不正确。。缺少一些描述@Pugazh我遗漏了什么？我在上一次编辑中看到了遗漏的代码。现在已修复。@Kawinesh Tab not Tav更正它…我可以问一下为什么使用“aria controls”属性吗？@gonzalomr设置或检索由当前元素控制的元素列表