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')。

这意味着div #tabs的所有tab-img儿童（及其子女）都将被隐藏，这就是您的班级$('#tabs > div')无效的原因。您可以制作仅选择#tab作为父级的div的选择器{{1}}。

e.g。 http://jsfiddle.net/kvkZX/1/

标签内容中的任何DIV都无法显示

1 个答案: