Question

我有一组选项卡，每个选项卡中都有一个div，其中包含一些子div。 .tabs（）调用创建标签标题并显示第一个div ...

单击第二个选项卡...尽管背景相同，但“背景”不显示作为第一个标签下的div...。

这是一个js小提琴

https://jsfiddle.net/GeoffRussell/cy6uL41d/

<div id="tabset">
    <ul> 
        <li><a href="#policytab">Policy</a></li>
        <li><a href="#backgroundtab">Background</a></li>
    </ul>
<div id="policytab">
    <div class="panel cflex">
        <div class="textdiv" contenteditable="true">xx</div>
        <div>
            <div class="lrflex">
            <div>L1</div>
            <div class="rflex">
                <div>R1</div>
                <div>R2</div>
            </div>
        </div>
    </div>
</div>
<div id="backgroundtab">
    <div class="panel cflex">
        <div class="textdiv" contenteditable="true">xx</div>
        <div>
            <div class="lrflex">
            <div>L1</div>
            <div class="rflex">
                <div>R1</div>
                <div>R2</div>
            </div>
        </div>
    </div>
</div>
</div>

使用CSS如下

.panel {
    height: 200px;
    border: 1px solid red;
    resize: both;
    overflow: auto;
}
.textdiv {
    border: 1px solid red;
    height: 1500px;
    overflow: auto;
}
.cflex {
    display: flex;
    flex-direction: column;
}
.rflex {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    border: 1px solid purple;
}
.lrflex {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    border: 1px solid green;
}

正在采取行动...

$("#tabset").tabs();

Answer 1

似乎我在class =“ lrflex” div之前的额外级别导致问题..但我不知道为什么。

Answer 2

我认为您的标签页工作正常，但内容文本相同，因此为什么不显示标签页结果。因此，我要求您更改内容并再次检查。

jQuery ui选项卡除第一个选项卡外未显示任何内容

2 个答案: