jquery - Div 类仅隐藏在 jQuery Tab 中

Question

我遇到了一个奇怪的问题，我不知道如何解决。我已经使用 jQuery 插件 [Tabulous] 实现了选项卡，并且正在将预先存在的内容转移到选项卡中。尝试将图像定位到文本 block 引用的左侧时，我遇到了一个奇怪的问题。

正如您在下图中所见，图像和文本在“选项卡”外成功显示，但是在选项卡内放置相同的代码和样式会导致以下结果。使用我检查过的检查元素并且 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;}

即使使用 clear: both 和 z-indexing 我也无法让图像显示给用户。任何帮助将不胜感激，干杯。

Answer 1

将名为“tabDiv”的类添加到 tabs-# l div,

<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>

因为 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');
    }

而不是使用名为“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);

输出打印屏幕:http://i.stack.imgur.com/pF7Dd.png

来自@ingro 评论的引用:https://github.com/aarondo/tabulous.js/issues/7