选项卡内容内的任何 DIV 都不能出现

Question

我使用网络上的简单标签 jquery 代码来显示一些变化的内容：

我把这段代码放在我的 html 页面的 HEAD 标记中：

<script src="js/jquery-1-9-1.js"></script> 

<script type="text/javascript">
    $(document).ready(function(){
          $('#tabs div').hide();   //hide
          $('#tabs div:first').show();   //show
          $('#tabs ul li:first').addClass('active');
          $('#tabs ul li a').click(function(){
               $('#tabs ul li').removeClass('active');
               $(this).parent().addClass('active');
               var currentTab = $(this).attr('href'); 
               $('#tabs div').hide();    //hide
               $(currentTab).show();    //show
               return false;
               });
    });
</script>

以及我的 CSS 文件中的一些规则：

/*TAB MEDIA k-enkripsi*/
.tab-wrapper {  background:#fcf;
  width: 768px; height:885px; bottom:0;
  margin:0 auto;
}

/*  TAB WRAP CONTENT    */
#tabs { 
  width: 100%; height: 150px;
  margin: 0 auto;
}


/*  TAB content yg berubah2   */
#tabs div {
    width: 100%; height:150px;
  margin:0px; 
  clear: both;
}

h3 {
  font:18px "scada-bold"; color:#f08435;
  letter-spacing: 0.1em;
  position:relative; float:left;
  text-align:left;
  margin:20px auto 20px;
}

.tab-img {
  width: 768px; height:465px; background: red;
}

.for-tab {
    float: right; 
    width:100%; height:150px;
    overflow:hidden;
    text-align:left !important;
    bottom:0;
    font: 16px "scada-regular" !important; color:white !important;
}

#tabs ul li a {
position: relative; float: left;
  text-decoration: none;
  padding: 8px;
  color:white;
  font-weight: bold;
}


/*  PAGINATION TAB menu navigator */
#tabs ul { 
  position: relative; float: left; left:-38px;
  width:100%; height: 35px; margin-top: 30px;
}
#tabs li { background: #AEAEAE; display: inline;
  width: 30px; height: 34px;  margin-right: 38px;
  border-radius: 2px;
  list-style: none; 
  font:17px "melbourne-regular"; color: white;

}
#tabs li, #tabs li a {
  float: left;  
    text-align: center;
  padding-left:7px;
}
#tabs ul li.active {
  background: #f08435;  
}
#tabs ul li.active a {
  color: white;
}

最后把它放在 HTML 页面中以显示内容选项卡：

<!-- TabMedia-enkripsi1 -->
        <div class="tab-wrapper">        
            <div id="tabs">
                <div id="tab-1" class="animated fadeIn">
                    <div class="tab-img"></div>
                    <p class="for-tab">Lorem satu ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>

                <div id="tab-2" class="animated fadeIn">
                    <div class="tab-img"></div>
                    <p class="for-tab">Lorem dua ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                </div>

                <div id="tab-3" class="animated fadeIn">
                    <div class="tab-img"></div>
                    <p class="for-tab">Lorem tiga ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>

                <div id="tab-4" class="animated fadeIn">
                    <div class="tab-img"></div>
                    <p class="for-tab">Lorem empat ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </div>

                    <ul>
                        <li><a href="#tab-1">1</a></li>
                        <li><a href="#tab-2">2</a></li>
                        <li><a href="#tab-3">3</a></li>
                        <li><a href="#tab-4">4</a></li>
                    </ul>
            </div>  <!-- tabs -->          
        </div> <!-- tab-wrapper -->

我在浏览器 Safari、Firefox 中进行了测试，但 CLASS 'tab-img' 并没有像我想象的那样出现。 我试图添加任何带有类的 div，跨类。但它们也根本不起作用。

仅当我放置一个用于查看文本的标签（如 P、H1 H2（所有标题标签））时才有效。 如果唯一有效的标签是显示文本，我很难放置图像或动画内容

有人可以帮我找出我在代码中可能遗漏的内容吗？

Answer 1

在您的 jquery 中，您将选择器用作 $('#tabs div')。

这意味着#tabs 的所有div 孩子（和他们的孩子）都将被隐藏，这就是你的班级tab-img 不起作用的原因。您可以使选择器$('#tabs > div') 仅搜索以#tab 作为父级的div。

例如http://jsfiddle.net/kvkZX/1/