0

Web の単純なタブ 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')持つ div のみを検索するセレクターを作成できます。#tab

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

于 2013-05-20T10:58:03.553 に答える