jQuery选项卡 - 显示在选项卡边框外部的内容

时间:2015-04-29 13:30:12

标签: jquery css tabs

更新:我需要使用IE8。

我想在jquery选项卡中放入一些div。内容正在显示,但它位于选项卡边框之外: enter image description here

我尝试删除 FacesContext facesContext = FacesContext.getCurrentInstance(); facesContext.getExternalContext().redirect(url); 的边框,但是我更喜欢边框。

这是页面的HTML(剥离):

#tabs {border: none}

这是页面的CSS(Stripped down):

<div class="ui-widget">
    <!-- Tabs -->
    <h2 class="demoHeaders">
        Codes</h2>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">GT2</a></li>
            <li><a href="#tabs-2">GT3</a></li>
            <li><a href="#tabs-3">GT4</a></li>
        </ul>
        <div id="tabs-1">
            <div id="container">
                <div id="questionActions">
                    Phasellus mattis tincidunt nibh. Cras orci urna, bl
                </div>
                <!-------------------------------------------ADD CONTENT BELOW THIS LINE---------------------------------------->
                <!-----------------------------------------------Slide 1----------------------------------------------->
                <div class="content" id="slide1">
                    <div class="slideText">
                        <strong>Nam dui erat, auctor a</strong><br />
                        Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet
                        ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum
                        bibendum.
                    </div>
                </div>
            </div>
        </div>
        <div id="tabs-2">
            Phasellus
        </div>
        <div id="tabs-3">
            Nam dui erat,
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

您需要从position:absolute删除#container

请参阅this fiddle