0

我使用来自网络的简单标签 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 （所有标题标签）之类的文本时才有效。如果唯一有效的标签是显示文本，我很难放置图像或动画内容

有人可以帮我找到我可能错过的代码吗？

4

1 回答 1

2

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

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

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

于 2013-05-20T10:58:03.553 回答