Question

我遇到了一个奇怪的问题，我不知道如何修复。我已经使用jQuery插件[Tabulous]实现了标签，并且正在将预先存在的内容转移到标签中。当我试图将图像放在块的文本引用的左边时，我遇到了一个奇怪的问题。

正如您在下面的图片中看到的那样，图像和文字在“标签”之外成功显示了＆＃39;但是在选项卡中放置相同的代码和样式会导致以下结果。使用检查元素我已检查并且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'的类添加到制表符 - #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

Div类只隐藏在jQuery标签

1 个答案: