DivクラスのみがjQueryタブに隠されています

Question

私は修正方法がわからない奇妙な問題に出くわしました。私はjQueryプラグイン[Tabulous]を使用してタブを実装しており、既存のコンテンツをタブに移動させています。テキストのブロッククォートの左にイメージを配置しようとすると、私は奇妙な問題に遭遇しました。

下の画像からわかるように、画像とテキストは「タブ」の外に表示されますが、タブ内に同じコードとスタイリングを配置すると以下のようになります。 inspect要素を使用してチェックして、iamge divが正しい場所に存在していますが、イメージが別の要素の背後に隠れているように見えます。ここで

関連するHTMLがtabs_container divのここ

<div id="tabs_container"> 
    <div id="tabs-1">   
    jdlfgbkfdjgn 
    <div class="trainer-container"> 
     <div id="Adrienne"></div> 
      <div class="h3light">Adrienne Michowski</div> 
      <div class="post-thumb"><img src="images/person3.jpg" width="200" height="200"></div> 
      <blockquote class="trainer"> 
       An English mathematician and writer, chiefly known for her work on Charles Babbage's early mechanical general-purpose computer, the Analytical Engine. Her notes on the engine include what is recognised as the first algorithm intended to be carried out by a machine. Because of this, she is often regarded as the first computer programmer. She trains clients in programming and longevity. 
      </blockquote> 
     </div> 
    </div> 

内のいくつかのタブがあるコード - で使用される関連CSSコードです：

でも明確な使用

#tabs_container { 
padding: 40px; 
overflow: hidden; 
position: relative; 
background: white; 
border-right: 5px solid #861b3f; 
font-family: Tahoma, Verdana, Segoe, sans-serif; 
font-size: 16px; 
margin:0 auto; 
z-index:0; 
align: left; 
/*width: 100%;*/} 

.trainer-container { 
overflow:hidden; 
padding-bottom: 30px;} 


h3 { 
font-family: Tahoma,Verdana,Segoe,sans-serif; 
padding: 1px 0 14px 0; 
margin-bottom: 5px; 
font-size: 20px;} 

.h3light { 
font-family: Tahoma, Verdana, Segoe, sans-serif; 
padding-top: 8px; 
padding-bottom: 14px; 
padding-left: 20px; 
font-size: 20px; 
color: #000; 
background: rgba(255, 255, 255, 0.4); 
padding: 0.3em; 
margin-bottom: 15px; 
text-indent: 20px; 
/* Box Shadow */ 
-moz-box-shadow: 2px 2px 15px #D53369; 
-webkit-box-shadow: 2px 2px 15px #D53369; 
/*box-shadow: 2px 2px 15px #FFF;*/} 

.post-thumb { 
display: block; 
max-width: 200px; 
max-height: 200px; 
float: left; 
background-color: #fff; 
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
margin: 1px 1px 1px 1px; 
z-index: 1; 
clear: both; 
background: none;} 

/* Blockquotes */ 

blockquote { 
background: #fff; 
padding: 15px 20px 15px 45px; 
margin: 0 20px 20px 20px; 
height: auto; 
font-family: Georgia,serif; 
font-size: 16px; 
line-height: 1.2; 
color: #000; 
text-align: justify; 
border-left: 20px solid #861b3f; 
border-right: 5px solid #861b3f; 
/* Box Shadow */ 
-moz-box-shadow: 2px 2px 15px #861b3f; 
-webkit-box-shadow: 2px 2px 15px #861b3f; 
box-shadow: 2px 2px 15px #861b3f; 
/*opacity: 0.5;*/ 
background: rgba(255,255,255,0.8);} 

blockquote::before { 
font-family: Georgia,serif; 
font-size: 60px; 
font-weight: 700; 
color: #999; 
position: absolute; 
left: 10px; 
top: 5px;} 

blockquote::after { 
content: "";} 

blockquote.trainer { 
min-height: 170px; 
margin: 0 0 0 220px;} 

：両方とz-インデックス付け私はイメージをユーザーに表示させることができません。どんな助けでも歓迎されるでしょう。

Answer 1

tabulous.Jsに次のコードは、ネストされた、または複数のdiv

if (this.options.effect == 'scale') { 
     tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescale'); 
    } else if (this.options.effect == 'slideLeft') { 
     tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideleft'); 
    } else if (this.options.effect == 'scaleUp') { 
     tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hidescaleup'); 
    } else if (this.options.effect == 'flip') { 
     tab_content = this.$elem.find('div').not(':first').not(':nth-child(1)').addClass('hideflip'); 
    } 

のために機能しないため

<div id="tabs-1" class="tabDiv"> 
    <p class="h3light">Adrienne Michowski</p> 
    <div class="post-thumb"><img src="RioOlympic.png" width="200" height="200"></div> 
     <blockquote class="trainer"> 
     An English mathematician and writer, chiefly known for her work on Charles Babbage's early mechanical general-purpose computer, the Analytical Engine. Her notes on the engine include what is recognised as the first algorithm intended to be carried out by a machine. Because of this, she is often regarded as the first computer programmer. She trains clients in programming and longevity. 
</blockquote> 

</div> 

、＃1のdiv要素をtabs-する 'tabDiv' と呼ばれる投票 追加クラスダウン

の代わりに、 'tabclass'という名前のクラス名を使用してCSSを適用します。

var tabclass = ".tabDiv"; 

if (this.options.effect == 'scale') { 
     tab_content = this.$elem.find(tabclass).not(':first').not(':nth-child(1)').addClass('hidescale'); 
    } else if (this.options.effect == 'slideLeft') { 
     tab_content = this.$elem.find(tabclass).not(':first').not(':nth-child(1)').addClass('hideleft'); 
    } else if (this.options.effect == 'scaleUp') { 
     tab_content = this.$elem.find(tabclass).not(':first').not(':nth-child(1)').addClass('hidescaleup'); 
    } else if (this.options.effect == 'flip') { 
     tab_content = this.$elem.find(tabclass).not(':first').not(':nth-child(1)').addClass('hideflip'); 
    } 
var alldivs = $('#tabs_container').find(tabclass); 

出力、印刷画面：@ingroコメントからhttp://i.stack.imgur.com/pF7Dd.png

参照：https://github.com/aarondo/tabulous.js/issues/7